[Flutter]GridViewの背景色を設定するには？

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

GridViewの背景色を設定する方法を紹介します。

方法

GridViewの背景色を設定するには、Containerを使います。

まず、GridViewをContainerでラップします。

そして、Containerの引数「color」に背景色を指定します。

Container(
  color: backgroundColor, //背景色
  child: GridView(・・・),
),

Containerの引数「color」に指定した色が、GridViewの背景色になります。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          color: Colors.yellow,
          child: GridView.count(
            shrinkWrap: true,
            padding: EdgeInsets.all(10),
            crossAxisCount: 3,
            mainAxisSpacing: 20,
            crossAxisSpacing: 20,
            children: [
              for (var i = 0; i < 9; i++)
                Container(
                  color: i.isEven ? Colors.blue : Colors.red,
                )
            ],
          ),
        ),
      ),
    );
  }