PageView

ページ単位で子ウィジェットをスクロールできるレイアウトを作成するウィジェット。

以下の動画で動作の雰囲気がわかる。

api.flutter.dev

使い方

基本形

PageView(
      children: ..., // ページ単位で表示したいウィジェットのリスト
 );

childrenプロパティにページ単位で表示したいウィジェットのリストを渡す。

上アプリのコードは以下。

return PageView(
  children: [
    Container(
      child: Center(
          child: Text(
        "page 1",
        style: TextStyle(fontSize: 50, fontWeight: FontWeight.w900),
      )),
    ),
    Container(
      child: Center(
          child: Text(
        "page 2",
        style: TextStyle(fontSize: 50, fontWeight: FontWeight.w900),
      )),
    ),
    Container(
      child: Center(
          child: Text(
        "page 3",
        style: TextStyle(fontSize: 50, fontWeight: FontWeight.w900),
      )),
    ),
  ],
);

スクロール方向を縦に設定

デフォルトは横方向スクロール。縦方向にスクロールしたい場合はscrollDirectionにAxis.verticalを指定する。

ページが画面に占める割合を設定する

PageControllerのviewportFractionプロパティに画面に占めるページサイズの割合を指定する。

デフォルトではviewportFractionプロパティに1.0が渡される。

次の例はページ幅が画面の50%を占めるように設定したもの。この時viewportFractionプロパティに0.5を渡す。ページの区切れ目がわかりやすいように、各ページの色を変えている。

class PageViewTest extends StatelessWidget {
  PageViewTest({Key? key}) : super(key: key);
  PageController _controller =
      PageController(viewportFraction: 0.5);

  @override
  Widget build(BuildContext context) {
    return PageView(
      controller: _controller,
      children: [
        Container(
          color: Colors.red[300],
          child: Center(
              child: Text(
            "page 1",
            style: TextStyle(fontSize: 50, fontWeight: FontWeight.w900),
          )),
        ),
        Container(
          color: Colors.green[300],
          child: Center(
              child: Text(
            "page 2",
            style: TextStyle(fontSize: 50, fontWeight: FontWeight.w900),
          )),
        ),
        Container(
          color: Colors.blue[300],
          child: Center(
              child: Text(
            "page 3",
            style: TextStyle(fontSize: 50, fontWeight: FontWeight.w900),
          )),
        ),
      ],
    );
  }
}

初期表示するページを指定する

PageControllerのinitialPageプロパティに初期表示のページインデックスを指定する。デフォルトは0。

以下は初期表示のページインデックスを1に指定した場合。

class PageViewTest extends StatelessWidget {
  PageViewTest({Key? key}) : super(key: key);
  PageController _controller = PageController(initialPage: 1);

  @override
  Widget build(BuildContext context) {
    return PageView(
      controller: _controller,
      children: [
        Container(
          color: Colors.red[300],
          child: Center(
              child: Text(
            "page 1",
            style: TextStyle(fontSize: 50, fontWeight: FontWeight.w900),
          )),
        ),
        Container(
          color: Colors.green[300],
          child: Center(
              child: Text(
            "page 2",
            style: TextStyle(fontSize: 50, fontWeight: FontWeight.w900),
          )),
        ),
        Container(
          color: Colors.blue[300],
          child: Center(
              child: Text(
            "page 3",
            style: TextStyle(fontSize: 50, fontWeight: FontWeight.w900),
          )),
        ),
      ],
    );
  }
}