Expandedが行を埋める

CoddyのFlutterジャーニー「画面サイズに合わせたレイアウト」セクションの一部。レッスン 1/30。

Rowは各子要素に、要求された幅を与えます。幅が指定されていないボックスはテキストと同じ幅しかないため、行の残りの部分は空いたままになります。

子要素をExpandedで囲むと、ほかの子要素が残したスペースをすべて使います。

Row(
  children: [
    Container(width: 100, color: Colors.red),
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
)

幅390ピクセルのスマートフォンでは、赤いボックスは100ピクセルのままで、青いボックスは残りの290ピクセルを使います。画面が広くなると青いボックスは大きくなり、赤いボックスは100ピクセルのままです。

ExpandedはColumnでも使えます。その場合、残りの高さを埋めます。

チャレンジ

簡単

検索バーが短すぎます。Searchボックスが行の残りの部分を埋め、幅80ピクセルのMenuボックスの隣で幅310ピクセルになるようにしてください。

自分で試してみよう

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Shop')),
        body: Column(
          children: [
            Row(
              children: [
                Container(
                  width: 80,
                  height: 56,
                  color: Colors.indigo,
                  child: const Center(
                    child: Text('Menu', style: TextStyle(color: Colors.white)),
                  ),
                ),
                Container(
                  height: 56,
                  color: Colors.indigo.shade100,
                  child: const Center(child: Text('Search')),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}