[Flutter]２カラム(column)のリストビュー(listview)を表示するには？

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

リストのビューを２カラムで表示する方法について解説します。

方法
まとめ

方法

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

まず、「GridView.count」の「crossAxisCount」に「２」を指定します。

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

GridView.count(
  crossAxisCount: 2,
  children: [
   /*リスト*/
   ]
),

また、List.generateを使うことで、リストを動的に作ることもできます。

body: GridView.count(
  crossAxisCount: 2,
  children: List.generate(
    /*count*/,
    (index) => /*Item*/
  ),
),

以下は、使用例です。

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