[Flutter] PageViewウィジェットの使い方

概要

Flutterでアプリを開発する時、TikTokのように画面全体をスクロールする機能を実装したい時があります。この時Flutterが基本的に提供するPageViewウィジェットを使えば簡単に実装できます。

このブログポストでは、PageViewウィジェットを使う方法について説明します。

このブログポストで紹介するソースコードは以下のリンクで確認できます。

GitHub: https://github.com/dev-yakuza/study-flutter/tree/main/widget/page_view

PageViewウィジェット

Flutterが提供するPageViewウィジェットはスクロールを通じて画面全体を移動するウィジェットです。PageViewウィジェットはchildrenプロパティを通じて複数のウィジェットを渡してページを構成できます。

Flutter - PageView widget scroll vertical

公式ドキュメントを通じてPageViewウィジェットについて詳しい情報を確認できます。

公式ドキュメント: PageView class

PageViewウィジェットの使い方

PageViewはFlutterが基本的に提供するウィジェットなので、次のようにPageViewウィジェットを簡単に使うことができます。

class MyHomePage extends StatelessWidget {
  MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        children: [
          Container(
            width: double.infinity,
            height: double.infinity,
            color: Colors.red,
          ),
          Container(
            width: double.infinity,
            height: double.infinity,
            color: Colors.blue,
          ),
          Container(
            width: double.infinity,
            height: double.infinity,
            color: Colors.green,
          ),
        ],
      ),
    );
  }
}

PageViewウィジェットのchildrenに表示するウィジェットを一緒に渡すと、次のように画面全体をスクロールしてページを移動できるようになります。

Flutter - PageView widget scroll horizontal

ここでは分かりやすくするためにContainerウィジェットを使用しました。

PageController

PageControllerを使用すると初期に表示するページを決定できます。

class MyHomePage extends StatelessWidget {
  final pageController = PageController(
    initialPage: 1,
  );

  MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: pageController,
        children: [
          ...
        ],
      ),
    );
  }
}

PageControllerのinitialPageプロパティに初めに表示するページのインデックスを設定できます。このように変更してアプリを再実行すると、初めに表示されるページが変更されたことを確認できます。

scrollDirectionオプション

PageViewウィジェットはscrollDirectionオプションを通じてスクロール方向を設定できます。基本的にscrollDirectionオプションはAxis.horizontalに設定されていますが、これをAxis.verticalに設定して垂直方向にスクロールできます。

PageView(
  controller: pageController,
  scrollDirection: Axis.vertical,
  children: [
    ...
  ],
)

このように修正して実行すると、次のように垂直方向にスクロールできるページを確認できます。

onPageChangedオプション

PageViewウィジェットはonPageChangedオプションを通じてページが変更された時に呼び出されるコールバック関数を設定できます。これを通じてページが変更された時に追加的な作業を行うことができます。

PageView(
  controller: pageController,
  onPageChanged: (index) {
    print('Page changed to $index');
  },
  children: [
    ...
  ],
)

PageView Builder

PageViewウィジェットはPageView.builderコンストラクタを通じて動的にページを作成することができます。PageView.builderコンストラクタはitemBuilderプロパティを通じてページを作成する関数を渡すことができます。

PageView.builder(
  controller: pageController,
  itemCount: 10,
  itemBuilder: (context, index) {
    return Container(
      width: double.infinity,
      height: double.infinity,
      color: index % 2 == 0 ? Colors.red : Colors.blue,
    );
  },
)

完了

今回のブログポストではFlutterが基本的に提供するPageViewウィジェットを使ってページ全体をスクロールする方法について説明しました。PageViewウィジェットを使うと簡単にページ全体をスクロールでき、scrollDirectionオプションを通じてスクロール方向を設定できます。

PageViewを使うと、TikTokのように画面全体をスクロールする機能を簡単に実装できます。もし、実装中のアプリが画面全体をスクロールする機能が必要なら、PageViewウィジェットを使って実装してみてください。

Github Sponsor

Buy me a coffee

私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！