Expanded füllt die Zeile

Teil des Abschnitts Layouts für jede Bildschirmgröße der Flutter-Journey von Coddy. Lektion 1 von 30.

Eine Row weist jedem untergeordneten Element die Breite zu, die es anfordert. Eine Box ohne festgelegte Breite ist nur so breit wie ihr Text, sodass der Rest der Zeile leer bleibt.

Umschließe ein untergeordnetes Element mit Expanded, dann nimmt es den gesamten Platz ein, den die anderen untergeordneten Elemente übrig lassen:

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

Auf einem 390 Pixel breiten Smartphone behält die rote Box ihre 100 Pixel, und die blaue Box bekommt die übrigen 290. Auf einem breiteren Bildschirm wächst die blaue Box; die rote bleibt 100 Pixel breit.

Expanded funktioniert auch in einer Column, wo es die verbleibende Höhe ausfüllt.

Aufgabe

Einfach

Die Suchleiste ist zu kurz. Lass das Feld Search den restlichen Platz in der Zeile einnehmen, sodass es neben dem 80 Pixel breiten Feld Menu 310 Pixel breit ist.

Probier es selbst

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