Flutter マルチカラムのリストビューを表示するサンプル

2024年2月4日

環境
Windows11 pro 64bit
Flutter 3.3.7

構文
GridView.count(
crossAxisCount: /*カラム数*/,
),
GridView.countの引数「crossAxisCount」にカラム数を指定します。
body: GridView.count(
crossAxisCount: /*カラム数*/,
childrenにリストとして表示するウェジェットを指定します。
children: List.generate(
/*要素数*/,
(index) => /*リストの要素*/
),
List.generateを使うことで、ListViewを動的に作成します。
使用例

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