[Flutter]Containerの高さ(height)を残っている余白分(remaining space)にするには？

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

Containerの高さを残っている余白分にする方法を紹介します。

方法

Containerの高さを残っている余白分に設定するには、ContainerをExpandedの「child」に指定します。

Expanded(
  child: Container(),
),

これでColumnなどで使用した際に、残された余白分の高さがContainerに設定されます。

以下は、使用例です。

使用例

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Container(
              height: 200,
              color: Colors.green,
            ),
            Expanded(
              child: Container(
                color: Colors.blue,
              ),
            ),
            Container(
              height: 100,
              color: Colors.red,
            ),
          ],
        ),
      ),
    );
  }