[Flutter]マルチカラムのリストビューを表示するには？

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

マルチカラムのリストビューを表示する方法を紹介します。

方法

マルチカラムのリストビューを表示するには、ListViewではなく、GridView.countを使います。

まず、GridView.countの引数「crossAxisCount」にカラム数を指定します。

GridView.count(
  crossAxisCount: /*カラム数*/,
),

そして、childrenにリストとして表示するウェジェットを指定します。

body: GridView.count(
  crossAxisCount: /*カラム数*/,
  children: [
      /*リスト*/
  ]
),

また、List.generateを使うことで、ListViewを動的に作成することが出来ます。

body: GridView.count(
  crossAxisCount: 3,
  children: List.generate(
    /*要素数*/,
    (index) => /*リストの要素*/
  ),
),

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.count(
        crossAxisCount: 3,
        children: List.generate(
          18,
          (index) => Card(
            child: Center(
              child: Text('$index'),
            ),
          ),
        ),
      ),
    );
  }

まとめ

マルチカラムのリストビューを表示するには、ListViewではなく、GridView.countを使います。