PageViewを使ってFlutterで画像を複数の画面上で共通化する方法

image

画像を保持したまま画面遷移をしたいって思ったことはないですか?? ちょうどこの間その処理をする機会が訪れたので、せっかくならということで、記事を作って投稿することにしました。 参考までにご覧ください。

方法の説明

まずは当たり前ですが、通常通り、画像をFlutterに取り込み、Flutterで表示させる2つの画面のコードを書きます。 次に、共通画面ページを作成します。 この際に、Pgae ViewというWidgetを使用します。 PageView は画面をスワイプして遷移させる Widgetです。 通常はボタンを使用して画面遷移をさせると思うんですが、PageViewWidgetを使用することでスクロールだけで画面遷移をすることができるようになります。 スクロールで画面遷移をしているため、背景画像をずっと貼り続けたようなUIを作ることができます。語彙足らずで何言ってるかわかんないという人は下のGif画像でなんとなく把握してください。

GIF Animation

各画面での処理

ここからは各画面の設計方法を実際のコードを紹介しながら説明していきます。 まずはmain.dartです。

main.dart

MaterialApp(
      theme: ThemeData.dark(),
      home: ScreenImage(),
    );

常にbackgroundは透明にしておく必要があるので、Colors.transparentを入れておきます。 次に一番目の画面を作っていきます。

home_page.dart


return Scaffold(
      backgroundColor: Colors.transparent,
      body: Stack(
        fit: StackFit.expand,
        children: [
          Column(
            children: const [
              //この中に自由に表示させたい Widgteをぶち込んじゃってください。
              //今回は適当にTextを入れております。
              Text('data'),
              Text('data'),
              Text('data'),
              Text('data'),
              Text('data'),
            ],
          ),
        ],
      ),
    );

画像が常に後ろにある状態なので、Stackを必ず使用して画面を設計していってください。 2つ目の画面も同様にStackを用いて表示させます。

では最後に一番重要な画像を表示させるページを作成します。

screen_image

  PageController controller = PageController(initialPage: 0);
return Scaffold(
      backgroundColor: Colors.transparent,
      body: Stack(
        fit: StackFit.expand,
        children: [
          Image.asset(
            'assets/images/ikusa.jpg',
            fit: BoxFit.cover,
          ),
          PageView(
            controller: controller,
            children: [
              HomePage(),
              SettingPage()
            ],
          ),
        ],
      ),
    );

Image Image

これだと、どのサイトでも一般的に紹介している内容でしかないので、わざわざこの記事を見る意味はないですよね。 そう思って、今回はAppbarでボタンを活用して画面遷移をする方法も追記しておきます。

ボタンを使用して画面遷移

PageViewのスワイプ機能をボタンでも活用することができるんです。 方法は以下の通りです。 まず、各ページに PageControllerを渡してあげます。 次にAppbarを用いてleanding Buttonを作成します。 そして一つ目の画面にはnextPageを、二つ目の画面にはpreviousPageを渡してあげます。 最後に共通画面のPageViewにcontrollerを渡してあげて終わりです。

コードは以下の通りです。 各画面のbodyなどは特に変更ないので省略します。

home_page.dart

 required this.controller}),
  final PageController controller;

 appBar: AppBar(
        backgroundColor: Colors.transparent,
        leading: IconButton(
          onPressed: () {
            widget.controller.nextPage(
                duration: const Duration(milliseconds: 100),
                curve: Curves.bounceIn);
          },
          icon: const Icon(Icons.settings),
        ),
      ),

2つ目の画面は widget.controller.nextPageの部分を widget.controller.previousPageに変更するだけです。 最後に共通画面です。 screen_image


 HomePage(
                  controller: controller,
                ),
                SettingPage(
                  controller: controller,
                ),

このようにcontollerを渡してあげるだけです。

Image Image

終わりに

どうです?うまくできましたか? 画面遷移の方法はこのほかにもBottom Navigation Barを利用した画面遷移など色々あります。 皆さんも適した画面遷移方法を使ってアプリを作成してみてください。

参考資料

PageView公式ドキュメント


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

お知らせ

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

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

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

Read More

タグ

Flutter (74)初心者向け (23)イベント (15)Google Apps Script (8)Nextjs (8)Firebase (7)可茂IT塾 (6)React (6)JavaScript (4)新卒 (3)就活 (3)給与支払報告書 (3)riverpod (3)Dart (3)TypeScript (3)インターン (3)設計 (2)線型計画法 (2)事例 (2)FlutterWeb (2)画像 (2)Figma (2)Next.js (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)ワーケーション (2)社会人 (2)大学生 (2)お知らせ (2)webfeed (1)RSS (1)CodeRunner (1)VSCode (1)個人開発 (1)フルリモート (1)学生向け (1)useSWR (1)supabase (1)Java (1)Spring Boot (1)エンジニア (1)DeviceOrientation (1)正規表現 (1)神楽 (1)趣味紹介 (1)プログラミングだけではない可茂IT塾のメンバー (1)PreferredSize (1)マテリアルデザイン (1)Material (1)クパチーノデザイン (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)Gmail (1)Googleグループ (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)branch (1)Git (1)オンラインオフィス (1)LINE (1)Freezed (1)アイコン (1)debug (1)Apple Store Connect (1)FlutterGen (1)検索機能 (1)Navigator (1)メール送信 (1)Material Design (1)カスタム認証 (1)アニメーション (1)FloatingActionButton (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)Dialog (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)

お知らせ

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

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

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

Read More