[Flutter]２つのListView.builderを２カラムで表示するには？

Flutter

2021.10.29

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

２つのListView.builderを２カラムで表示する方法を紹介します。

方法
1. GridView
2. Row + SizedBox
まとめ

方法

２つのListView.builderを２カラムで表示する方法は、２つあります。

GridView

１つは、GridViewを使う方法です。

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

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

GridView.count(
  crossAxisCount: 2,
  children: [
    ListView.builder(
      ・・・
    ),
    ListView.builder(
     ・・・    
    ),
  ],
),

以下は使用例です。

GridView.count(
  crossAxisCount: 2,
  children: [
    ListView.builder(
      itemCount: 20,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('$index'),
        );
      },
    ),
    ListView.builder(
      itemCount: 20,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('$index'),
        );
      },
    ),
  ],
  childAspectRatio: 0.5,
),

Row + SizedBox

もう１つは、RowウェジェットとSizedBoxを使う方法です。

まず、Rowウェジェットの引数「children」にListView.builderを２つ指定します。

そして、２つのListViewをSizedBoxでラップし、SizedBoxの「width」に横幅を指定します。

以下は、例です。

Row(
  children: [
    SizedBox(
      width: MediaQuery.of(context).size.width / 2.1,
      child: ListView.builder(
        shrinkWrap: true,
        itemCount: 20,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('$index'),
          );
        },
      ),
    ),
    VerticalDivider(),
    SizedBox(
      width: MediaQuery.of(context).size.width / 2.1,
      child: ListView.builder(
        shrinkWrap: true,
        itemCount: 20,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('$index'),
          );
        },
      ),
    ),
  ],
),