【Flutter基礎】Expandedについて

概要

FlutterのWidgetの1つであるExpandedについて説明します。

Expanded

ExpandedというWidgetは、RowやColumnの子Widget間の隙間を目一杯埋めたいときに使います。

また、実装者は、Expandedを必ずRow、Column、Flexの子要素として配置します。
隙間を埋めるためのWidgetなので、そりゃそうだろうという感じですね。

実際に、Expandedを使用してみた実装、画面が以下になります。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ExpandedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Expanded"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  height: 100,
                  color: Colors.blue,
                  child: Text("fix")
                ),
                Expanded(
                    child: Container(
                      color: Colors.orange,
                      child: Text("expanded"),
                    ))
              ],
            ),
            Expanded(
                child: Container(
                    color: Colors.grey
                )
            )
          ],
        ),
      ),
    );
  }
}

オレンジと灰色の部分が、Expandedの力によって目一杯隙間を埋めている部分になります。

もう少し実用的な例

もう少し実用的な例だと、列状に一覧表示したいWidgetを、下のWidgetにぶつかるまで目一杯広げたい、という場面があるのではないかなぁと思います。
そんな場合だと、ExpandedとListViewというWidgetを使って、以下のように表現できます。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ExpandedListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ExpandedList"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Expanded(
              child: ListView(
                children: <Widget>[
                  Text(
                    "item1",
                    style: TextStyle(fontSize: 30),
                  ),
                  Text(
                    "item2",
                    style: TextStyle(fontSize: 30),
                  ),
                  Text(
                    "item3",
                    style: TextStyle(fontSize: 30),
                  ),
                  Text(
                    "item4",
                    style: TextStyle(fontSize: 30),
                  ),
                  Text(
                    "item5",
                    style: TextStyle(fontSize: 30),
                  ),
                  Text(
                    "item6",
                    style: TextStyle(fontSize: 30),
                  ),
                ],
              ),
            ),
            Container(height: 500, color: Colors.grey)
          ],
        ),
      ),
    );
  }
}

下の灰色の部分は固定になっていて、ExpandedのおかげでListViewはそれより上の領域を目一杯使えるようになっています。(item6は隠れていますが、スクロールすれば確認できます)