例えば、Flutterで4つのコンテンツがあるとします。

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(color: Colors.red),
            Container(color: Colors.blue),
            Container(color: Colors.yellow),
            Container(color: Colors.grey)
          ],
        ),
      ),
    );
  }
}

こちらを画面で確認すると、

image2

何も表示されません。

これは、コンテンツのサイズを指定していないからです。

では、コンテンツにサイズを指定します。

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Container(color: Colors.red, width: 300, height: 300),
      Container(color: Colors.blue, width: 300, height: 300),
      Container(color: Colors.yellow, width: 300, height: 300),
      Container(color: Colors.grey, width: 300, height: 300)
    ],
  ),
),

ブラウザで確認すると、

image3

コンテンツがはみ出してしまいました。

それぞれのコンテンツがはみ出ないよう、画面一杯に表示したい場合は、Expandedを使用します。

では、それぞれのContainerExpandedを追加します。

child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Expanded(
        child: Container(color: Colors.red, width: 300, height: 300)),
    Expanded(
        child: Container(color: Colors.blue, width: 300, height: 300)),
    Expanded(
        child:
            Container(color: Colors.yellow, width: 300, height: 300)),
    Expanded(
        child: Container(color: Colors.grey, width: 300, height: 300))
  ],
),

ブラウザで確認すると、

image4

コンテンツの高さ指定が無効になり、画面内で均等に表示されました。

heightを削除しても、

child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Expanded(child: Container(color: Colors.red, width: 300)),
    Expanded(child: Container(color: Colors.blue, width: 300)),
    Expanded(child: Container(color: Colors.yellow, width: 300)),
    Expanded(child: Container(color: Colors.grey, width: 300))
  ],
),

image5

同じ結果が表示されます。

例えば、1番目のコンテンツのExpandedを削除し、高さを指定すると、

child: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(color: Colors.red, width: 300, height: 300),
    Expanded(child: Container(color: Colors.blue, width: 300)),
    Expanded(child: Container(color: Colors.yellow, width: 300)),
    Expanded(child: Container(color: Colors.grey, width: 300))
  ],
),

image6

1番目のコンテンツがそのまま表示され、画面内の高さで、その他のコンテンツが均等に表示されました。

ブログ一覧