【コピペOK】flutterのSizedBoxとExpandedの違いをわかりやすく

flutterでオブジェクトのサイズ調整の理解が曖昧な方向け。

flutterでアプリ開発を行う際に頻出する項目の一つのため、この記事でなるべくわかりやすく解説します。

SizedBoxとExpandedを使いこなしてサイズ調整をできるようになりましょう。

この記事は以下のような方を対象者としています。

flutter初学者の方
flutterでオブジェクトのサイズ調整のやり方が分からない方

SizedBoxとExpandedのデモコード
#

まずは、こちらのソースコードをご覧ください。

こちらのコードでは、赤色、青色、緑色の四角形型オブジェクトを描画するデモコードです。

こちらのソースを元に解説していきます。

class SplashScreen extends StatefulWidget {
  SplashScreen({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
    　body: Container(
        child: Row(
            children: <Widget>[
                <!-- 今回の説明部分 -->
                Expanded(
                    child: _redBoxWidget(),
                ),
                Expanded(
                    child: _blueBoxWidget(),
                ),
                Expanded(
                    child: _greenBoxwidget(),
                )
            ],
      　),
    ));
  }
}

<!-- 赤色のボックスを描画 -->
Widget _redBoxWidget() {
  return Container(
    color: Colors.red,
    padding: EdgeInsets.all(10.0),
    margin: EdgeInsets.all(10.0),
  );
}

<!-- 青色のボックスを描画 -->
Widget _blueBoxWidget() {
  return Container(
    color: Colors.blue,
    padding: EdgeInsets.all(10.0),
    margin: EdgeInsets.all(10.0),
  );
}

<!-- 緑色のボックスを描画 -->
Widget _greenBoxwidget() {
  return Container(
    color: Colors.green,
    padding: EdgeInsets.all(10.0),
    margin: EdgeInsets.all(10.0),
  );
}

ちなみにアプリで表示するとこんな感じです。

flutterをわかりやすく : Expandedとは
#

こちらはオブジェクトを縦もしくは横いっぱいにオブジェクトを表示するために使われます。

KotlinやJavaのコードでいうと"match_parent"のような役割です。

このExpandedのおかげでオブジェクトにwidthやheightの設定が不要になります。

また、ExpandedはColumn(オブジェクトを縦に並べる)、Row(オブジェクトを横に並べる)、もしくはFlex(比率で並べる)内で使われる必要があります。

flutterをわかりやすく : SizedBoxとは
#

こちらはExpandedとは対照的にwidthとheightで厳密にオブジェクトのサイズを指定したい時に使われます。

試しに先ほどのコードを一部ExpandedをSizedBoxに修正したコードと画像を添付します。

class _SplashScreenState extends State<SplashScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      child: Row(
        children: <Widget>[
          <!-- ExpandedからSizedBoxに変更しwidthとheightを指定 -->
          SizedBox(
            width: 200,
            height: 200,
            child: _redBoxWidget(),
          ),
          Expanded(
            child: _blueBoxWidget(),
          ),
          Expanded(
            child: _greenBoxwidget(),
          )
        ],
      ),
    ));
  }
}