Expanded riempie la riga

Fa parte della sezione Layout adattabili del percorso Flutter di Coddy. Lezione 1 di 30.

Una Row assegna a ogni figlio la larghezza richiesta. Un riquadro senza larghezza è largo solo quanto il suo testo, quindi il resto della riga rimane vuoto.

Avvolgi un figlio in Expanded e occuperà tutto lo spazio lasciato libero dagli altri figli:

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

Su un telefono largo 390 pixel, il riquadro rosso mantiene i suoi 100 pixel e quello blu occupa i restanti 290. Su uno schermo più largo, il riquadro blu si espande, mentre quello rosso rimane largo 100.

Expanded funziona anche in una Column, dove riempie l'altezza rimanente.

Sfida

Facile

La barra di ricerca è troppo corta. Fai in modo che il riquadro Search riempia il resto della riga, così sarà largo 310 pixel accanto al riquadro Menu da 80 pixel.

Provalo tu

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