Expanded preenche a linha

Parte da seção Layouts que se adaptam do Journey de Flutter da Coddy. Lição 1 de 30.

Uma Row dá a cada filho a largura que ele solicita. Uma caixa sem largura definida tem apenas a largura do texto, então o restante da linha fica vazio.

Envolva um filho em Expanded e ele ocupará todo o espaço que os outros filhos deixarem:

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

Em um celular com 390 pixels de largura, a caixa vermelha mantém seus 100 pixels e a caixa azul fica com os outros 290. Em uma tela mais larga, a caixa azul aumenta; a vermelha permanece com 100.

Expanded também funciona em uma Column, onde preenche a altura restante.

Desafio

Fácil

A barra de pesquisa está muito curta. Faça a caixa Search ocupar o restante da linha, de modo que tenha 310 pixels de largura ao lado da caixa Menu de 80 pixels.

Experimente você mesmo

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