[Flutter]Scaffoldのbodyに複数(multiple)のウェジェット(child widget)を表示するには？

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

Scaffoldのbodyに複数のウェジェットを表示する方法を紹介します。

方法
使用例

方法

Scaffoldのbodyに複数のウェジェットを表示するには、主に３つのウェジェットを使います。

Column : 縦方向に複数のウェジェットを並べて表示
Row : 横方向に複数のウェジェットを並べて表示
Stack : 複数のウェジェットを重ねて表示

まず、これら３つのいずれかをScaffoldの引数「body」に指定します。

そして、選択したウェジェットの引数「children」に複数のウェジェットをリストで指定します。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column( //RowとStackでも同じ
        children: [
          Widget1(),
          Widget2(),
          Widget3(),
          ・・・
        ],
      ),
    );
  }

Column、Row、Stackなどを使えば、Scaffoldのbodyに複数のウェジェットを指定することが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            height: 200,
            color: Colors.blue,
          ),
          Container(
            height: 200,
            color: Colors.yellow,
          ),
          Container(
            height: 200,
            color: Colors.pink,
          )
        ],
        mainAxisAlignment: MainAxisAlignment.center,
      ),
    );
  }