[Flutter]PageViewでページが切り替わった(on page changed)時に処理をするには？

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

PageViewでページが切り替わった時に処理をする方法を紹介します。

方法
使用例

方法

PageViewでページが切り替わった時に処理をするには、引数「onPageChanged」を使います。

具体的には、PageViewの引数「onPageChanged」にページが切り替わった時に呼び出す関数を指定します。

呼び出す関数は、「void (index){}」のようなもので、引数ではPageViewで移動先のページのインデックスを受け取ります。

PageView.builder(
  onPageChanged: (index) { //引数では移動先のインデックスを受け取る
       //ページが変更された時の処理
  },
  itemBuilder: (context, index) {
    return Page();
  },
),

引数「onPageChanged」を使えば、PageViewでページが切り替わっ時に処理をすることが出来ます。

使用例

以下は、使用例です。

  var _selectIndex = 0;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('${_selectIndex + 1} / 3'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: PageView(
            children: [
              Container(
                color: Colors.yellow,
              ),
              Container(
                color: Colors.green,
              ),
              Container(
                color: Colors.pink,
              ),
            ],
            onPageChanged: (index) {
              setState(() {
                _selectIndex = index;
              });
            },
          ),
        ),
      ),
    );
  }