Zenn
💡

【Flutter Widget of the Week #9】PageViewを使ってみた

2022/10/04に公開
Flutter
初心者
pageview
tech

はじめに

Flutter Widget of the Week #9 PageView についてまとめましたので、紹介します。
https://youtu.be/J1gE9xvph-A

PageView とは

アプリに複数の画面がある場合、スワイプして画面を切り替えられるようにしたいと考えたことはないでしょうか？
そんな思いを実現するのが今回紹介する PageView です。
早速ですが、サンプルを動かして仕組みを見てみましょう。

PageView サンプル ： 3つのページを水平にスワイプさせる

まずは API Document にあるサンプルを動かしてみましょう。
これは横にスワイプすることで画面を切り替えることができます。

main.dart
class PageViewSample extends StatelessWidget {
  const PageViewSample({super.key});

  @override
  Widget build(BuildContext context) {
    /* スワイプの検出とスワイプ時のアニメーションを管理する controller を作成 */
    final PageController controller = PageController();
    return PageView(
      /// [PageView.scrollDirection] defaults to [Axis.horizontal].
      /// Use [Axis.vertical] to scroll vertically.
      controller: controller,
      children: const <Widget>[
        Center(
          child: Text('First Page'),
        ),
        Center(
          child: Text('Second Page'),
        ),
        Center(
          child: Text('Third Page'),
        ),
      ],
    );
  }
}

使い方としては、
まずスワイプの検出とスワイプ時のアニメーションを管理する PageController を作ります。
次に PageView の controller に PageController の値を指定します。
そして、children の中にスワイプで切り替える画面を作ることで実行することができます。

PageView サンプル ： 3つのページを垂直にスワイプさせる

縦方向にスワイプすることで画面を切り替えたい場合は、 PageView の scrollDirection プロパティに Axis.vertical を指定してあげることで実現できます。

PageView のプロパティについて

PageView にはいくつかプロパティがあります。
主要なプロパティを説明します。

(new) PageView PageView({
  Key? key,
  Axis scrollDirection = Axis.horizontal,
  bool reverse = false,
  PageController? controller,
  ScrollPhysics? physics,
  bool pageSnapping = true,
  void Function(int)? onPageChanged,
  List<Widget> children = const <Widget>[],
  DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  bool allowImplicitScrolling = false,
  String? restorationId,
  Clip clipBehavior = Clip.hardEdge,
  ScrollBehavior? scrollBehavior,
  bool padEnds = true,
})

①scrollDirection

スワイプの方向を指定する
デフォルトは Axis.horizontal（横方向）
型は Axis 型

②reverse

children のなかに作ったページの読み込みを上から下か、下から上のどちらの方向で行うかを指定する
型は bool 型

③onPageChanged

表示が切り替わったときに行う処理を設定する
型は void Function(int) 型

④controller

このページビューがスクロールされる位置を制御するために使用できるオブジェクトを設定する
型は PageController 型

PageController のプロパティについて
(new) PageController PageController({
  int initialPage = 0,
  bool keepPage = true,
  double viewportFraction = 1.0,
})

①initialPage

初期ページを指定する
型は int 型

②viewportFraction

各ページが占めるべきビューポートの割合を設定する
型は double 型

最後に

今回は PageView を紹介しました。通常、ボタンなどをタップすることで画面遷移すると思いますが、スワイプで画面を切り替えるようにするだけでも、動きのある作りになります。ユーザビリティを考慮して使ってみるのも良いですね。
次は #10 Table です。またお会いしましょう。

参考記事

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

Discussion