FlutterDesktopでExpandedを理解する

この記事は以下の方を対象に書いています。

Expnadedの使い方を知りたい
ウィジェットのサイズを調整する方法を知りたい

Expandedとは
プロパティについて
Expnadedの定義
flexプロパティの基本
Expandedの応用
最後に

Expandedとは

Expandedとは、ウィジェットです。

親ウィジェット内で子ウィジェットが利用可能な空間を拡張することができるため、

レスポンシブなデザインができるようになります。

プロパティについて

Expandedは、「flex」プロパティを持っています。

flexは親ウィジェット内でのスペース(空間)の分配を決定することができます。

実際に見たほうが理解できると思いますので、以下のサンプルコードをご覧ください。

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
              flex: 1,
              child: Container(
                color: Colors.green,
                child: Text('AAAAAAAAAAAAAAAAAAAAA'),
              ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.redAccent,
              child: Text('BBBBBBBBBBBBBBBBBBBBB'),
            ),
          ),
        ],
      ),
    );
  }
}

flutter-expanded-sample-1 — Expandedウィジェット

Expnadedの定義

上記のサンプルコードでは、Columnウィジェットを親ウィジェットとして、

Columnの子ウィジェットとして、Expandedウィジェットを組み込みました。

このように、ExpandedウィジェットはColumnやRowなどのchildrenプロパティを持つ

ウィジェットの子ウィジェットとして定義するのが一般的です。

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Expanded(
        flex: 1,
        child: Container(
          color: Colors.green,
          child: Text('AAAAAAAAAAAAAAAAAAAAA'),
        ),
    ),
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.redAccent,
        child: Text('BBBBBBBBBBBBBBBBBBBBB'),
      ),
    ),
  ],
),

flexプロパティの基本

flexは、スペース（空間）の分配を決定するプロパティです。

そのため、サンプルコードのように「flex: 1」などと記述することができます。

親ウィジェット内に複数存在するExpandedにflexを指定することで、

分配する割合を決められるので、以下のサンプルコードでは「1:3」という分配になっています。

flexを指定しない（記述しない）場合は、等分されます。

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Expanded(
        flex: 1,
        child: Container(
          color: Colors.green,
          child: Text('AAAAAAAAAAAAAAAAAAAAA'),
        ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.redAccent,
        child: Text('BBBBBBBBBBBBBBBBBBBBB'),
      ),
    ),
  ],
),

Expandedの応用

Expandedをうまく使いこなすと、こんなことも出来るようになります。

ポイントとしては、Rowだけではなく、Rowの子ウィジェットの中にColumnウィジェットを

持っており、そのどちらでもExpandedを使用している点です。

かなり複雑になりますので、まずは慣れるまで最小構成で練習をしてから、自分の好みのデザインにすることをお勧めします。

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Expanded(
      child: Container(
        height: MediaQuery.of(context).size.height,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.green,
                child: Text('AAAAAAAAAAAAAAAAAAAAA'),
              ),
            ),
            Expanded(
              flex: 3,
              child: Container(
                color: Colors.redAccent,
                child: Text('BBBBBBBBBBBBBBBBBBBBB'),
              ),
            ),
          ],
        ),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        height: MediaQuery.of(context).size.height,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.amber,
                child: Text('CCCCCCCCCCCCCCCCCCC'),
              ),
            ),
            Expanded(
              flex: 3,
              child: Container(
                color: Colors.blue,
                child: Text('DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD'),
              ),
            ),
          ],
        ),
      ),
    ),
  ],
),