[Flutter]横スクロールのListViewでCardを使うには？

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

横スクロールのListViewでCardを使う方法を紹介します。

方法

横スクロールのListViewでCardを使用するには、まずCardをSizedBoxの「child」に指定します。

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

ListView(
  scrollDirection: Axis.horizontal,
  children: [
      SizedBox(
        width: 100,
        child: Card(),
      ),
  ],
)

これで横スクロールのListViewでCardが表示されるようになります。

以下は、使用例です。

child: ListView(
  scrollDirection: Axis.horizontal,
  children: [
    for (var i = 0; i < 10; i++)
      SizedBox(
        width: 100,
        child: Card(
          color: Colors.blue,
        ),
      ),
  ],
),