Expanded() == Flexible(fit: FlexFit.tight)

FlutterのExpandedとFlexibleの違いのメモです。

Expandedを使って以下のコードを書いた場合。

          child: Column(
            children: [
              Expanded(
                child: Container(
                  color: Colors.pink,
                  child: Text('あいうえお'),
                ),
              ),
              Container(
                height: 150,
                color: Colors.orange,
              ),
              Expanded(
                child: Container(
                  color: Colors.purple,
                ),
              ),
            ],
          ),

端末一番上の Text('あいうえお)は、Columnの親がExpandedで囲われているため、可能な限り縦の領域を埋め尽くそうとWidgetが広がります。

              Expanded(
                child: Container(
                  color: Colors.pink,
                  child: Text('あいうえお'),
                ),
              ),

タイトル通り、Expandedの部分を、 Flexible(fit: FlexFit.tight)に変更して囲うと、結果は同じ表示になります。

          child: Column(
            children: [
              Flexible( // 変更
                fit: FlexFit.tight,
                child: Container(
                  color: Colors.pink,
                  child: Text('あいうえお'),
                ),
              ),
              Container(
                height: 150,
                color: Colors.orange,
              ),
              Expanded(
                child: Container(
                  color: Colors.purple,
                ),
              ),
            ],
          ),

というのも、ExpandedはFlexibleを継承していて、 fit: FlexFit.tightで作られています。

class Expanded extends Flexible {
  /// Creates a widget that expands a child of a [Row], [Column], or [Flex]
  /// so that the child fills the available space along the flex widget's
  /// main axis.
  const Expanded({
    Key? key,
    int flex = 1,
    required Widget child,
  }) : super(key: key, flex: flex, fit: FlexFit.tight, child: child);

先程のコードで、 fit: FlexFit.tightの部分を fit: FlexFit.looseにした場合。

          child: Column(
            children: [
              Flexible(
                fit: FlexFit.loose, // 変更
                child: Container(
                  color: Colors.pink,
                  child: Text('あいうえお'),
                ),
              ),
              Container(
                height: 150,
                color: Colors.orange,
              ),
              Expanded(
                child: Container(
                  color: Colors.purple,
                ),
              ),
            ],
          ),

空いている領域を全て埋め尽くすことはせず、子Widgetの高さだけ広がります。

フォントサイズが大きくなるなどの、子Widget大きくなってoverflowしそうなときは、 fit: FlexFit.tightと同じ挙動をして、広がれる限界まで広がります。
今回は、Columnの子に3つのWidgetを置いていますが、FlexibleとExpandedの flex: 1がそれぞれデフォルトで設定されているため、最初と最後のWidgetが1対1で広がるようになっています。