Flutterダイアログによる画像プレビューの実現

要件

画像をタップするだけで、画像プレビュー表示できます。 画像をピンチアウトで拡大、縮小することができます。 だた、画像の拡大、縮小はSimulatorやEmulatorでは試すことができず、実機のみの反映となります。

実装

考え方としてはdialogにInteractiveViewerウェジェットをラッパし、クローズアイコンを加えて、プレビューを閉じやすくする。

ソースコードはご参考まで

void showPreviewImage(
  BuildContext context, {
  required Uint8List image,
}) {
  showDialog(
    barrierDismissible: true,
    barrierLabel: '閉じる',
    context: context,
    builder: (context) {
      return Stack(
        alignment: Alignment.topCenter,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Expanded(
                child: InteractiveViewer(
                  minScale: 0.1,
                  maxScale: 5,
                  child: Image.memory(
                    image,
                  ),
                ),
              ),
            ],
          ),
          Row(
            children: [
              Material(
                color: Colors.transparent,
                child: IconButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  icon: const Icon(
                    Icons.close,
                    size: 30,
                  ),
                ),
              ),
            ],
          ),
        ],
      );
    },
  );
}

ズーム

画像の拡大、縮小を実現するのはInteractiveViewerウェジェットです。minScaleとMaxScaleを定義してあげれば、拡大縮小の範囲制限できます。デフォルトは0.8倍~2.5倍です。

InteractiveViewer(
  minScale: 0.1,
  maxScale: 5,
  child: Image.memory(
    image,
  ),
),

参考