Help us understand the problem. What is going on with this article?

【Flutter】Expanded vs Flexible

More than 1 year has passed since last update.

Expanded vs Flexible

最近,Flutterにはまっています.FlutterはWidgetというものが数多くあって,非常にコードを書くことが楽しいのですが,時々使う「Flexible」と「Expanded」の違いが分からなくなりそうだったため,備忘録として投稿してみました(初投稿).

なぜ違いが分からなくなったのか

どちらのWidgetもRowやColumnの中で使用するのですが,どちらもRow(Column)の中に配置されるWidgetの位置を調整するWidgetであり,役割が似ているため,時々違いが分からないということがありました.
今回の記事では,違いを分かりやすくするために,Textを色のついた箱で囲ってイメージしやすくしてみました.

Expandedについて

ExpandedはRow(Column)の中のWidgetを固定の比率で配置するWidgetです.
以下は,Expandedを利用したコードとスクリーンショットです.
コードでは,それぞれの箱を1:2:3の比率で表示するようにしています.
スクリーンショットを見てみると,Expandedを利用した場合,Textの幅に関わらず,固定の比率いっぱいまで表示しています

expanded.dart
child: Row(
          children: [
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.blue,
                child: Text('Expanded\n\n(flex:1)'),
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.orange,
                child: Text('Expanded\n\n(flex:2)'),
              ),
            ),
            Expanded(
              flex: 3,
              child: Container(
                color: Colors.green,
                child: Text('Expanded\n\n(flex:3)'),
              ),
            ),
          ],
        ),

Flexibleについて

Flexibleは名前の通り,Widgetに応じて柔軟に比率を変更した状態で,それぞれのWidgetを配置します.
以下が,Flexibleを利用したコードとスクリーンショットです.
こちらもExpandedと同じように,比率は1:2:3で表示するようにしましたが,スクリーンショットを見てみるとわかるように,Flexibleを利用した場合,Textの幅に応じて柔軟に比率を変更して表示しています

flexible.dart
child: Row(
          children: [
            Flexible(
              flex: 1,
              child: Container(
                color: Colors.blue,
                child: Text('Flexible\n\n(flex:1)'),
              ),
            ),
            Flexible(
              flex: 2,
              child: Container(
                color: Colors.orange,
                child: Text('Flexible\n\n(flex:2)'),
              ),
            ),
            Flexible(
              flex: 3,
              child: Container(
                color: Colors.green,
                child: Text('Flexible\n\n(flex:3)'),
              ),
            ),
          ],
        ),

ちなみに,Flexibleを利用して,Textの文字数を多くした場合も検証してみました.以下がその場合のスクリーンショットです.

Flexibleの場合,Textの文字数を多くしてみると,1:2:3の比率は保つためにTextが折り返されたりすることで,比率が調整されます.柔軟ですね.

最後に

Flutterを始めてからまだ間もないですが,とても楽しいです.初投稿だったので拙い記事かもしれませんが,少しでもお役に立てると幸いです.あと,Flutterの公式ドキュメントはとても情報が豊富で助かりますね.

参考リンク

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした