[Flutter]GridView.builderを使うには？

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

GridView.builderを使う方法を紹介します。

方法
使用例
まとめ

方法

GridView.builderを使うには、次の３つの引数を使います。

gridDelegate : 設定をするための引数
itemCount : 要素数
builder : 要素の生成

この３つの引数を使うことで、GridView.builderを使うことが出来ます。

gridDelegate

引数「gridDelegate」は、GridViewの設定をするための引数です。

この引数には、次の２つのいずれかを指定します。

SliverGridDelegateWithFixedCrossAxisCount : カラム数を固定
SliverGridDelegateWithMaxCrossAxisExtent : 要素のサイズでカラム数を操作

この２つのいずれかを引数「gridDelegate」に指定し、その引数でGridViewの設定をします。

itemCount

引数「itemCount」は、GridViewの要素数を設定する引数です。

GridViewの引数「itemCount」に要素数を指定することで、GridViewが正しく表示されます。

builder

引数「builder」では、要素の生成を行います。

具体的には、要素のWidgetを返す「(context, index){}」のような関数を指定します。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, //カラム数
          ),
          itemCount: 9, //要素数
          itemBuilder: (context, index) {
           //要素を戻り値で返す
            return Container(
              color: index.isEven ? Colors.blue : Colors.yellow,
            );
          },
          shrinkWrap: true,
        ),
      ),
    );
  }