[Flutter]２カラム(column)のGridView(グリッドビュー)を作るには？

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

２カラムのGridviewを作る方法を紹介します。

方法
使用例

方法

２カラムのGirdViewを作るには、GridView.countを使います。

まず、GridView.countの引数「children」にGridViewの要素を指定します。

そして、引数「crossAxisCount」に「２」を指定します。

GridView.count(
  crossAxisCount: 2,
  children: <Widget>[
    ・・・
  ],
),

これで２カラムのGridViewを作ることが出来ます。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GridView.count(
          crossAxisCount: 2,
          children: <Widget>[
            Container(color: Colors.blue),
            Container(color: Colors.yellow),
            Container(color: Colors.pink),
            Container(color: Colors.green),
          ],
          shrinkWrap: true,
        ),
      ),
    );
  }