【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

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

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

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

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

Read More

タグ

Flutter (105)初心者向け (26)イベント (17)Google Apps Script (15)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (5)新卒 (4)就活 (4)vscode (4)デザイン (4)Dart (4)JavaScript (4)FlutterWeb (3)Prisma (3)NestJS (3)Figma (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)設計 (2)線型計画法 (2)事例 (2)Image (2)File (2)Material Design (2)画像 (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)Git (1)オンラインオフィス (1)オブジェクト指向 (1)クラスの継承 (1)ポリモーフィズム (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)datetime_picker (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Firebase App Distribution (1)Fastlane (1)Dio (1)CustomClipper (1)ClipPath (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)docker (1)GithubActions (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

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

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

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

Read More