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

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

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

方法
使用例

方法

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

具体的には、GridView.countの引数「childAspectRatio」に縦と横の比率（横 : 縦）を指定します。

GridView.count(
  childAspectRatio: /*比率(横幅：高さ)*/,
  crossAxisCount: /*count*/,
  children: <Widget>[
    ・・・
  ],
),

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

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GridView.count(
          childAspectRatio: 2 / 3, //横幅:高さ = ２:３
          shrinkWrap: true,
          crossAxisCount: 2,
          children: <Widget>[
            Container(
              color: Colors.blue,
            ),
            Container(
              color: Colors.pink,
            ),
            Container(
              color: Colors.green,
            ),
            Container(
              color: Colors.yellow,
            ),
          ],
        ),
      ),
    );
  }