【Flutter】Expandedの使い方｜Columnの余白いっぱいに要素を広げる

2023年1月14日

こんにちは、フラメルです。

今回はColumn、Row、Flexで任意の子要素を主軸の余白いっぱいに広げられるExpandedの使い方を紹介します。

Expandedの使い方

Column、Row、Flexの子要素をExpandedでラップすると主軸の余白いっぱいにウィジェットが広がります。

下記コードでは2つ目の黄色のContainerをExpandedでラップしています。

Column(
  children: [
    Container(
      width: 100,
      height: 100,
      color: Colors.redAccent,
    ),
    Expanded(
      child: Container(
        width: 100,
        color: Colors.amberAccent,
      ),
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.blueAccent,
    ),
  ],
),

Expandedを複数使用する場合

デフォルトで複数のExpandedを使用する場合子要素は主軸の余白を等分したサイズに調整されます。

よって、要素別にサイズを変更したい場合はflexを使用してサイズの比率を指定します。右画像では「flex: 2」と「flex: 1」の割合にサイズを指定しています。

Column(
  children: [
    Container(
      width: 100,
      height: 100,
      color: Colors.redAccent,
    ),
    Expanded(
      flex: 2,
      child: Container(
        width: 100,
        color: Colors.amberAccent,
      ),
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Expanded(
      flex: 1,
      child: Container(
        width: 100,
        color: Colors.amberAccent,
      ),
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
  ],
),

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter')),
        body: Center(
          child: Column(
            children: [
              Container(
                width: 100,
                height: 100,
                color: Colors.redAccent,
              ),
              Expanded(
                flex: 2,
                child: Container(
                  width: 100,
                  color: Colors.amberAccent,
                ),
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Expanded(
                flex: 1,
                child: Container(
                  width: 100,
                  color: Colors.amberAccent,
                ),
              ),
              Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以上です。

合わせて読みたい

参考サイト

https://api.flutter.dev/flutter/widgets/Expanded-class.html