Flutter GridViewで要素同士の間隔を設定するサンプル

2024年2月4日

環境
Windows11 pro 64bit
Flutter 3.3.7

構文
GridView.count(
mainAxisSpacing: /*縦方向の間隔*/,
crossAxisSpacing: /*横方向の間隔*/,
crossAxisCount: /*count*/,
GridViewで要素同士の間隔を設定するには、次の２つの引数を使います。
mainAxisSpacing : 縦方向
crossAxisSpacing : 横方向

GridViewの方向を縦にする場合は、２つの引数の役割が反対になります。
なので、引数「mainAxisSpacing」が横方向の間隔、引数「crossAxisSpacing」が
縦方向の間隔になります。

使用例

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: GridView.count(
        mainAxisSpacing: 35.0, //縦方向の間隔
        crossAxisSpacing: 25.0, //横方向の間隔
        shrinkWrap: true,
        crossAxisCount: 2,
        children: <Widget>[
          Container(
            color: Colors.red,
          ),
          Container(
            color: Colors.pink,
          ),
          Container(
            color: Colors.green,
          )
        ],
      ),
    ),
  );
}