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

開発環境

• 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),
)

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

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

まずは先ほど行った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