Points de rupture de LayoutBuilder

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

Sur une tablette, une application de messagerie affiche le menu à côté des messages. Sur un téléphone, il n’y a pas assez de place, alors le menu s’affiche au-dessus. La largeur à laquelle la mise en page change s’appelle un point de rupture.

LayoutBuilder vous indique l’espace dont dispose un widget et vous permet de créer une disposition différente pour chaque taille :

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < 600) {
      return Column(children: [menu, content]); // téléphone
    }
    return Row(children: [menu, content]); // tablette
  },
)

builder est une fonction que Flutter appelle en lui transmettant l’espace dont elle dispose, dans constraints. constraints.maxWidth correspond à la largeur maximale du résultat. En dessous de 600 pixels, vous renvoyez une Column ; sinon, une Row. Sur un téléphone de 390 pixels, vous voyez la colonne ; sur une tablette de 1000 pixels, la ligne.

MediaQuery lit l’écran entier. LayoutBuilder lit l’espace d’un seul widget : il fonctionne donc même lorsque ce widget est un panneau à l’intérieur d’une page plus grande.

Défi

Moyen

Le menu et le contenu sont toujours côte à côte, ce qui est encombrant sur un téléphone. Utilisez un LayoutBuilder avec un seuil à 600 pixels :

moins de 600 : le menu au-dessus du contenu, dans une Column
600 ou plus : côte à côte, dans une Row, comme maintenant

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('Mail')),
        body: Row(
          children: [
            Expanded(
              child: Container(
                color: Colors.teal.shade100,
                child: const Center(child: Text('Menu')),
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.white,
                child: const Center(child: Text('Content')),
              ),
            ),
          ],
        ),
      ),
    );
  }
}