Flutter

【Flutter入門】Expandedの使い方

こんにちは、アプリ開発者のテルです!

「Expandedの使い方がわからない」とお悩みではないでしょうか?

テル

本記事ではそんな悩みを解決していきます!

本記事を読むメリット
  1. Expandedの使い方がわかるようになる
  2. 使用例を用いた解説で初心者でも理解できる

Expandedの使い方

Row(
 children: [
   Expanded(
      子Widget
   ),
    Expanded(
      子Widget
   ),
  ],
 );

Expandedは、内包した単一の子Widgetを使用可能なスペース全体に広げてくれるWidgetです。RowやColumn内で使用することができます。

自動的にサイズを指定してくれるため、柔軟なレイアウトを可能にしてくれます。

使用例

class DicePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: Image(
              image: AssetImage('images/dice1.png'),
          ),
        ),
        Expanded(
          child: Image(
            image: AssetImage('images/dice2.png'),
          ),
        ),
      ],
    );
  }
}
Expandedを使っていない
Expandedを使っている

Expandedを使用した場合は、右側のように画面内に画像が収まるようにサイズを自動的に指定してくれます。対してExpandedを使用していない場合は、画像が元のサイズのまま表示されてしまい、画面内に収まらず、エラーが起きてしまいます。

このようにExpandedは、柔軟なレイアウトを可能にしてくれます。

まとめ

今回は、Expandedの使い方について解説しました。

Expandedはよく使う基本的なWidgetです。そのため、今回解説した内容をしっかりと押さえておきましょう。

▼Flutterの効率的な勉強法を下記でご紹介しています。

【2022年版】Flutterの効率的な勉強法!具体的な手順を解説

本記事が参考になっていれば幸いです。

最後までご覧いただきありがとうございました。ではまた!

参考文献
Flutter関連の書籍を出版しました!