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

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

方法の説明

まずは当たり前ですが、通常通り、画像をFlutterに取り込み、Flutterで表示させる２つの画面のコードを書きます。次に、共通画面ページを作成します。この際に、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を必ず使用して画面を設計していってください。２つ目の画面も同様に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()
            ],
          ),
        ],
      ),
    );

これだと、どのサイトでも一般的に紹介している内容でしかないので、わざわざこの記事を見る意味はないですよね。そう思って、今回は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),
        ),
      ),

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


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

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