Expanded заполняет строку

Часть раздела Адаптивная компоновка путешествия по Flutter на Coddy. Урок 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 занимало оставшуюся часть строки и имело ширину 310 пикселей рядом с полем Menu шириной 80 пикселей.

Попробуйте сами

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')),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}