Flutterで横幅いっぱい、縦幅いっぱいに広がるウィジェットをレイアウトする方法

FlutterでContainerウィジェットを使って、画面の横幅いっぱい、縦幅いっぱいに広がるウィジェットを作成する方法を紹介します。
この記事でポイントとなるのが、double型の無限値を表すdouble.infinityです。
double.infinityを使用することで、親ウィジェットの提供する最大の空間を利用して、Containerを拡張できます。フレキシブルなUIデザインを実現する際に役に立つ方法です。

Containerを縦横一杯に広げる方法

double.infinityをwidthとheightプロパティに設定することで、Containerウィジェットを画面全体に広げることができます。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.blue,
          child: Center(
            child: Text('Hello, full screen!'),
          ),
        ),
      ),
    ),
  );
}

このコードでは、Containerが青色の背景とともに全画面に広がるように配置しています。中央にはテキストが表示します。以下が実行結果です。

double.infinityを使用する場合の注意点

double.infinityを使用する場合、Containerが配置される親ウィジェットが無制限のサイズを提供していない場合（例えば、RowやColumnのようなウィジェット内で使用する場合）、レイアウトの問題が発生する可能性があります。このような場合は、代わりにMediaQueryを使用してデバイスの画面サイズに基づいてサイズを設定することが推奨されます。

MediaQueryの使用例

デバイスの画面サイズを直接取得して、画面一杯のサイズでContainerを設定する例は以下の通りです。
この例では、LayoutBuilderを使用して、Containerが配置されるスペースの最大幅と高さを取得しています。これにより、Containerは利用可能な最大スペースを動的に使用することができます。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            return Container(
              width: constraints.maxWidth,
              height: constraints.maxHeight,
              color: Colors.green,
              child: Center(
                child: Text('${constraints.maxWidth} x ${constraints.maxHeight}'),
              ),
            );
          },
        ),
      ),
    ),
  );
}

以下が実行結果です。

まとめ

double.infinityを使用することで、Containerウィジェットを画面全体に広げることが簡単にできますが、親ウィジェットの制約に注意が必要です。
MediaQueryやLayoutBuilderを利用することで、より柔軟にウィジェットのサイズを管理することができます。しかし、MediaQueryを多用するとレイアウトの計算ロジックが複雑になるため、多用は禁物です。