[Flutter]PageView.builderの使い方

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

PageView.builderの使い方を解説します。

使い方
使用例

使い方

PageView.builderは、次の２つの引数を指定して使います。

itemCount : ページ数
itemBuilder : 表示するページを返す関数

引数「itemCount」には、PageViewのページ数を指定します。

引数「itemBuilder」には、「Widget Function(context, index){}」のような関数を指定します。

PageView.builder(
  itemBuilder: (context, index) {
    return Page();
  },
  itemCount: /*ページ数*/,
),

この２つの引数を指定すれば、PageView.builderを使うことが出来ます。

PageView.builderの引数「itemBuilder」の関数の第２引数(上記のコードではindex)は、ページの位置を受け取る引数です。

ページの位置は、左から「０、１、２、・・・」のようになっています。

使用例

以下は、使用例です。

  var _pages = [
    Container(
      color: Colors.blue,
    ),
    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(
            itemBuilder: (context, index) {
              return _pages[index];
            },
            itemCount: _pages.length,
          ),
        ),
      ),
    );
  }