Partager l’espace avec flex

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

Lorsque deux enfants d’un Row sont tous deux Expanded, ils se partagent l’espace à parts égales : sur un téléphone de 390 pixels, ils disposent chacun de 195 pixels.

Pour le partager de manière inégale, attribue un flex: à Expanded. Il s’agit d’une part, et non d’une taille. Flutter additionne les parts et répartit l’espace en fonction de celles-ci :

Row(
  children: [
    Expanded(flex: 3, child: Container(color: Colors.red)),
    Expanded(flex: 1, child: Container(color: Colors.blue)),
  ],
)

Le total des parts est de 4, donc le rouge reçoit les trois quarts de la ligne et le bleu un quart. Un enfant sans flex: a une part de 1.

Comme les parts représentent des fractions du tout, la disposition conserve ses proportions quelle que soit la largeur de l’écran.

Défi

Facile

Fais en sorte que la boîte Chart soit deux fois plus large que la boîte Notes. Sur le téléphone, cela correspond à 260 et 130 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('Dashboard')),
        body: Column(
          children: [
            Row(
              children: [
                Expanded(
                  child: Container(
                    height: 120,
                    color: Colors.teal,
                    child: const Center(
                      child: Text('Chart', style: TextStyle(color: Colors.white)),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    height: 120,
                    color: Colors.amber,
                    child: const Center(child: Text('Notes')),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}