[Flutter]Containerを並べて表示するには？

Flutter

2021.11.04

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

Containerを並べて表示する方法を紹介します。

方法
1. 縦
2. 横に並べる
まとめ

方法

縦

Containerを縦に並べて表示するには、Columnを使います。

Columnの引数「children」に[]を指定し、[]内に並べたいContainerをカンマ(,)区切りで指定します。

Column(
    children : [
          Container(),
          Container(),
          Container(),
          ・・・
    ]
)

childrenに指定されたコンテナは、上から順に表示されます。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              color: Colors.blue,
              height: 200,
              width: 200,
            ),
            Container(
              color: Colors.green,
              height: 200,
              width: 200,
            ),
            Container(
              color: Colors.yellow,
              height: 200,
              width: 200,
            ),
          ],
        ),
      ),
    );
  }

横に並べる

Containerを横に並べるには、 Rowウェジェットを使います。

Rowの引数「children」に[]を指定し、[]内に並べたいContainerをカンマ(,)区切りで指定します。

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

childrenに指定されたコンテナは、左から順に表示されます。

使用例

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