[Flutter]ListView内のCardの横幅を設定するには？

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

ListView内もしくはListView.builder内で使うCardの横幅を設定する方法を紹介します。

方法

ListView内もしくはListView.builder内のCardの横幅を設定するには、まず「Card」を「SizedBox」の「child」に指定します。

この時、SizedBoxに設定したい横幅を引数「width」で指定します。

また、引数「height」で高さも設定しておきます。

ListView(
  children : [
     SizedBox(
        width: 250, //横幅
        height: 50, //高さ
        child: Card(),
    );
  ],
),

そして、SizedBoxをAlignの「child」にします。

child: ListView.builder(
  children : [
    Align(
      child: SizedBox(
        width: 250,
        height: 50,
        child: Card(),
      ),
    );
  ],
),

これでCardの横幅を設定できます。

以下は、使用例です。

ListView.builder(
  shrinkWrap: true,
  itemCount: 50,
  itemBuilder: (context, index) {
    return Align(
      alignment: Alignment.center,
      child: SizedBox(
        width: 250,
        height: 50,
        child: Card(
          color: Colors.blue,
        ),
      ),
    );
  },
),

まとめ

ListView内のCardの横幅を設定するには、「Align > SizedBox > Card」のように階層構造を作ります。

そして、中間のSizedBoxで横幅と高さを指定します。