2020/10/19 Flutter : Expanded widgetの訳

Flexibleウィジェットと似たウィジェットとして、Expandedウィジェットも、他のウィジェットをラップ(wrap、囲む)して、余分なスペースを埋めるように強制することができます。

ヒント：FlexibleとExpandedの違いは何ですか？ 行または列のウィジェットのサイズを変更するには、Flexibleを使用します。 このようにして、親ウィジェットとの相対的なサイズを維持しながら、子ウィジェットの間隔を調整できます。 Expandedは、子ウィジェットの制約を変更するため、空のスペースを埋めます。

制約と、Flutterがウィジェットのサイズと位置を決定する方法に制約がどのように影響するかについて詳しくは、制約についてを参照してください。

sample1-1

//sample1-1
//main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp(),);
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home:Scaffold(
        appBar:AppBar(),
        body:MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return   Column(
      children: <Widget>[
        Container(
          height:100,  //←高さを指定した。
          color: Colors.pinkAccent[100],
        ),
        Container(
          height:100,
          color: Colors.pinkAccent[200],
        ),
        Container(
          height:100,
          color: Colors.pinkAccent[700],
        ),
      ],
    );
  }
}

↓result

sample1-2

//sample1-2
//main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp(),);
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home:Scaffold(
        appBar:AppBar(),
        body:MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return   Column(
      children: <Widget>[
        //↓Expandedウィジェットでラップした。
        Expanded(
          child: Container(
            height:100,
            color: Colors.pinkAccent[100],
          ),
        ),
        Container(
          height:100,
          color: Colors.pinkAccent[200],
        ),
        Container(
          height:100,
          color: Colors.pinkAccent[700],
        ),
      ],
    );
  }
}

↓result

一つ目のContainerのheightプロパティを変えてもサイズは変わらない。

利用可能領域全てを使用する。

この場合の利用可能領域は全画面から「appBar(画面上部の水色部分)と二つ目、三つ目のウィジェットを除いた部分」。

まず二つ目、三つ目のウィジェットがinflexibleなので先に配置され、その後flexibleなウィジェットと見なされる一つ目のウィジェットのサイズが決定される。

ExpandedウィジェットはfitプロパティがFlexFit.tightで固定されるので、子ウィジェット(Containerウィジェット)の高さを変えても、強制的に利用可能領域全てを使用するようになる。その結果がsample1-2のresult。

参考

https://flutter.dev/docs/codelabs/layout-basics

https://flutter.dev/docs/codelabs/layout-basics#expanded-widget