Expanded ocupa toda la fila

Parte de la sección Diseños que se adaptan del Journey de Flutter de Coddy. Lección 1 de 30.

Un Row le da a cada elemento secundario el ancho que solicita. Una caja sin ancho solo tiene el ancho de su texto, así que el resto de la fila queda vacío.

Envuelve un elemento secundario en Expanded y ocupará todo el espacio que dejen los demás elementos secundarios:

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

En un teléfono de 390 píxeles de ancho, la caja roja conserva sus 100 píxeles y la caja azul obtiene los otros 290. En una pantalla más ancha, la caja azul crece; la roja permanece en 100.

Expanded también funciona en una Column, donde ocupa la altura restante.

Desafío

Fácil

La barra de búsqueda es demasiado corta. Haz que el cuadro Search ocupe el resto de la fila, de modo que tenga 310 píxeles de ancho junto al cuadro Menu de 80 píxeles.

Pruébalo tú mismo

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