[Flutter]PageView(ページビュー)を自動スクロール(auto scroll)するには？

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

PageViewを自動スクロールする方法を紹介します。

方法
使用例

方法

PageViewを自動スクロールするには、Timerクラスのperiodicコンストラクタを使います。

具体的には、Timerクラスをperiodicコンストラクタで生成します。

periodicの第１引数には時間間隔、第２引数にはスクロールの処理を指定します。

_timer = Timer.periodic(
  Duration(/*自動スクロールの間隔*/),
  (timer) {
   //スクロール処理
  },
);

Timerクラスのperiodicコンストラクタを使えば、PageViewが自動スクロールされるようになります。

periodicコンストラクタは、特定の処理を何度も呼び出すことの出来るようにするコンストラクタです。

使用例

以下は、使用例です。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Timer? _timer;
  int _currentPage = 0;
  PageController _pageController = PageController(
    initialPage: 0,
    viewportFraction: 0.8,
  );

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(
      Duration(seconds: 1),
      (timer) {
        if (_currentPage < 2) {
          _currentPage++;
        } else {
          _currentPage = 0;
        }

        _pageController.animateToPage(
          _currentPage,
          duration: Duration(milliseconds: 200),
          curve: Curves.linear,
        );
      },
    );
  }

  @override
  void dispose() {
    _pageController.dispose();
    _timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 300,
          height: 300,
          child: PageView(
            controller: _pageController,
            children: [
              Container(
                color: Colors.blue,
              ),
              Container(
                color: Colors.yellow,
              ),
              Container(
                color: Colors.pink,
              ),
            ],
          ),
        ),
      ),
    );
  }
}