[Flutter]GridView.builderで要素(item)のサイズ(size)(高さ(height)・横幅(width))を変える(change)には？

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

GridView.builderで要素の高さと横幅を変える方法を紹介します。

方法
使用例

方法

GridView.builderで要素のサイズを変えるには、引数「gridDelegate」を使います。

まず、GridView.builderの引数「gridDelegate」にSliverGirdDelegateを指定します。

そして、SliverGridDelegateの引数「childAspectRatio」に、縦と横の比率（横 : 縦）を指定します。

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: /*count*/,
    childAspectRatio: /*横幅:高さ*/,
  ),
  itemBuilder: (context, index) {
    ・・・
  },
),

引数「gridDelegate」を使えば、GridView.builderで要素のサイズを変えることが出来ます。

SliverGridDelegateWithMaxCrossAxisExtentでも、引数「childAspectRatio」で同じようにサイズを変えることが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: 3 / 2, //横幅:高さ = 3:2
          ),
          shrinkWrap: true,
          itemBuilder: (context, index) {
            return Container(
              color: index.isEven ? Colors.blue : Colors.pink,
            );
          },
          itemCount: 9,
        ),
      ),
    );
  }