[Flutter]PageViewを無限ループ(infinite loop)させるには？

どうも、ちょげ(@chogetarou)です。

PageViewを無限ループさせる方法を紹介します。

方法
使用例

方法

PageViewを無限ループさせるには、PageView.builderとPageControllerを使います。

まず、PageControllerの変数を用意します。

このPageControllerの引数「initialPage」には出来るだけ大きな数字を指定します。

次に、PageView.builderの引数「controller」に用意した変数を指定します。

//initialPageには出来るだけ大きな数字
final _pageController = PageController(initialPage: 999); 

~~~~~~~

PageView.builder(
  controller: _pageController,
),

そして、PageView.builderの引数「itemBuilder」で返すページを、ページのインデックスをページ数で割った余りを使って指定します。

PageView.builder(
  controller: _pageController,
  itemBuilder: (context, index) {
    //ページのインデックスをページ数で割った値を使う
    return _pages[index % _pages.length];
  },
),

これでPageViewを無限ループにすることが出来ます。

initialPageで大きな数字を指定するのは、最初のページより前にスクロールするためです。

initialPageを大きな数字にすることで、無限スクロールっぽくするのです。

使用例

以下は、使用例です。

  final _pageController = PageController(initialPage: 999);
  final _pages = [
    Container(
      color: Colors.yellow,
    ),
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.pink,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: PageView.builder(
            controller: _pageController,
            itemBuilder: (context, index) {
              return _pages[index % 3];
            },
          ),
        ),
      ),
    );
  }