[Flutter]横スクロールのリストビュー(ListView)でListTileを使うには？

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

横スクロールのリストビューでListTileを使う方法を紹介します。

方法

横スクロールのリストビューでListTileを使うには、まずListTileをSizedBoxの「child」に指定します。

そして、SizedBoxの引数「width」で横幅を設定します。

ListView(
  scrollDirection: Axis.horizontal,
  children: [
    SizedBox(
      width: /*横幅*/,
      child: ListTile(
        title: Text('Item'),
      ),
    ),
  ],
),

これで横スクロールのリストビューでListTileが使えるようになります。

以下は、例です。

ListView(
  shrinkWrap: true,
  scrollDirection: Axis.horizontal,
  children: [
    SizedBox(
      width: 100,
      child: ListTile(
        title: Text('Item'),
      ),
    ),
    SizedBox(
      width: 100,
      child: ListTile(
        title: Text('Item'),
      ),
    ),
    SizedBox(
      width: 100,
      child: ListTile(
        title: Text('Item'),
      ),
    ),
  ],
),