[Flutter]Card(カード)を横並び(horizontal)で表示するには？

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

Cardを横並びで表示する方法を紹介します。

方法
使用例

方法

Cardを横並びで表示するには、Rowウェジェットを使います。

具体的には、Rowウェジェットの引数「children」に表示するCardのリストを指定します。

Row(
  children: [
    Card(),
    Card(),
    Card(),
    ・・・
  ],
),

これでCardを横並びにすることが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Card(
              color: Colors.blue,
              child: Container(
                height: 100,
                width: 100,
              ),
            ),
            Card(
              color: Colors.green,
              child: Container(
                height: 100,
                width: 100,
              ),
            ),
            Card(
              color: Colors.yellow,
              child: Container(
                height: 100,
                width: 100,
              ),
            ),
          ],
        ),
      ),
    );
  }