Flutter ListView.builderを横スクロールにするサンプル

2023年10月15日

環境
Windows11 pro 64bit
Flutter 3.3.7

構文

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: /*数*/,
  itemBuilder: (context, index) {
    return /*アイテム*/;
  },
),

ListView.builderを横スクロールにするには、引数「scrollDirection」に「Axis.horizontal」を指定します。

使用例

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: 10,
  itemBuilder: (context, index) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        width: 80,
        color: Colors.green,
        child: Text('$index'),
      ),
    );
  },
),