Expanded wypełnia wiersz

Część sekcji Układ dopasowany do ekranu ścieżki Flutter w Coddy. Lekcja 1 z 30.

Row przydziela każdemu elementowi podrzędnemu taką szerokość, o jaką prosi. Pole bez określonej szerokości jest tylko tak szerokie jak jego tekst, więc reszta wiersza pozostaje pusta.

Umieść element podrzędny w Expanded, a zajmie całą przestrzeń pozostawioną przez pozostałe elementy:

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

Na telefonie o szerokości 390 pikseli czerwone pole zachowuje szerokość 100 pikseli, a niebieskie zajmuje pozostałe 290. Na szerszym ekranie niebieskie pole się powiększa, a czerwone pozostaje szerokie na 100 pikseli.

Expanded działa również w Column, gdzie wypełnia pozostałą wysokość.

Wyzwanie

Łatwy

Pasek wyszukiwania jest za krótki. Spraw, aby pole Search wypełniało resztę wiersza, tak aby miało 310 pikseli szerokości obok pola Menu o szerokości 80 pikseli.

Spróbuj swoich sił

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