【Flutter】簡単に画像のプレビュー画面を作りたい

image

開発環境

  • M1 Mac
  • Flutter 2.10.3
  • Dart 2.16.1

実装例

GestureDetector(
  child: Image.network(
    photos[i].imageUrl,
    fit: BoxFit.cover,
  ),
  onTap: () {
    showGeneralDialog(
      transitionDuration: Duration(milliseconds: 1000),
      barrierDismissible: true,
      barrierLabel: '',
      context: context,
      pageBuilder: (context, animation1, animation2) {
        return DefaultTextStyle(
          style: Theme.of(context)
              .primaryTextTheme
              .bodyText1!,
          child: Center(
            child: Container(
              height: 500,
              width: 500,
              child: SingleChildScrollView(
                  child: InteractiveViewer(
                minScale: 0.1,
                maxScale: 5,
                child: Container(
                  child: Image.network(
                    photos[i].imageUrl,
                  ),
                ),
              )),
            ),
          ),
        );
      },
    );
  },
),

始めに

Flutterで画像の一覧を作ったり、画像のリストを作ったときにもうワンステップ加えるだけで、使いやすくかつ見栄えが良くなるのが画像のプレビュー表示です。 画像をピンチアウトで拡大、縮小することができます。 注意点:この機能はSimulatorやEmulatorでは試すことができず、実機のみの反映となります。ご注意ください

実装

まず、画像をタップ時に行う処理を書きます。 今回はGestureDetectorを使用します。ImageをGestureDetectorで囲んであげます。

次にダイアログ内で画像を見せるためにダイアログを作成します。 今回はshowGeneralDialogを使用します。

arrierDismissible: false,
barrierLabel: '',
barrierColor:Color(0xffFAFDFF),
context: context,
pageBuilder: (context, animation1, animation2)

次に画像の拡大、縮小を行います。 画像の拡大縮小は意外と簡単に実装できます。 InteractiveViewerWidgetを使います。

このWidgetは、表示したいものが画像サイズより大きい場合に使用されます。 ピンチアウトでの画像の拡大縮小や、パンなどを行うことができます。 今回は拡大縮小機能だけを使用するため紹介はしませんが、そのほかにも色々な機能がありますので調べてみると面白いですよ。

InteractiveViewer(
  minScale: 0.1,
  maxScale: 5,
  child: Image.network(url),
)

このように表示する画像を囲い使用します。 これで終わりかと思ったら大間違い。このままではダイアログを閉じることができません。

下の写真のように閉じるためのアイコンをダイアログ上部につける必要があります。

img1

まずは先ほど行ったInteractiveViewerをStackで囲ってあげましょう。

次にInteractiveViewer(以下略)の配下にSafeAreaを配置し、そこにIconButtonをつけます。

SafeArea(
  child: IconButton(
    onPressed: () {
      Navigator.of(context).pop();
    },
    icon: const Icon(Icons.close),
  ),
)

今回はdialogの閉じる機能をfalseにしたのでこのような処理を行う必要がありました。

これでよく見たことがあるプレビュー画面の完成です!!

最後に

今回は画像のプレビューをDialog表示で簡単に作成してみました。 DialogはAlertDialogのようにpopUp式に出てくれるので無駄なページ遷移をしないで済むので初心者でも簡単に作成することができます。 まだDialogやInteractiveViewerには今回紹介できなかった機能がたくさんありますのでレベルアップしたい方はぜひ調べてみてください!!

参考

https://api.flutter.dev/flutter/widgets/InteractiveViewer-class.html

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (70)初心者向け (22)イベント (15)Nextjs (8)Google Apps Script (7)可茂IT塾 (6)Firebase (6)React (5)新卒 (3)就活 (3)給与支払報告書 (3)riverpod (3)Dart (3)JavaScript (3)TypeScript (3)インターン (3)FlutterWeb (2)画像 (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)ワーケーション (2)社会人 (2)大学生 (2)お知らせ (2)webfeed (1)RSS (1)CodeRunner (1)VSCode (1)個人開発 (1)設計 (1)フルリモート (1)学生向け (1)Java (1)Spring Boot (1)エンジニア (1)DeviceOrientation (1)正規表現 (1)神楽 (1)趣味紹介 (1)プログラミングだけではない可茂IT塾のメンバー (1)線型計画法 (1)事例 (1)PreferredSize (1)マテリアルデザイン (1)Material (1)クパチーノデザイン (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)シェアハウス (1)スクレイピング (1)Gmail (1)Googleグループ (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)Vercel (1)Google Domains (1)branch (1)Git (1)オンラインオフィス (1)Freezed (1)アイコン (1)Apple Store Connect (1)FlutterGen (1)検索機能 (1)Navigator (1)メール送信 (1)カスタム認証 (1)アニメーション (1)FloatingActionButton (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)Dialog (1)Figma (1)デザイン (1)Slack (1)BI (1)非同期処理 (1)BackdropFilter (1)iOS (1)レビュー (1)getAuth (1)匿名 (1)Algolia (1)chakra-ui (1)コンサルティング (1)Symbol (1)reactive_forms (1)

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More