Expanded remplit la ligne

Fait partie de la section Des mises en page adaptées du Journey Flutter de Coddy. Leçon 1 sur 30.

Une Row donne à chaque enfant la largeur qu’il demande. Une boîte sans largeur est aussi large que son texte, donc le reste de la ligne reste vide.

Enveloppe un enfant dans Expanded et il occupera tout l’espace laissé par les autres enfants :

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

Sur un téléphone de 390 pixels de large, la boîte rouge conserve ses 100 pixels et la boîte bleue occupe les 290 restants. Sur un écran plus large, la boîte bleue s’agrandit ; la rouge reste à 100 pixels.

Expanded fonctionne aussi dans une Column, où il remplit la hauteur restante.

Défi

Facile

La barre de recherche est trop courte. Faites en sorte que la boîte Search remplisse le reste de la ligne, afin qu’elle fasse 310 pixels de large à côté de la boîte Menu de 80 pixels.

Essayez vous-même

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