L’erreur de débordement

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

L’écran d’un téléphone est petit. Lorsque les enfants d’un Row ont besoin de plus de largeur que l’écran n’en offre, Flutter dessine des bandes jaunes et noires sur le bord où ils débordent, et affiche un message dans la Console :

A RenderFlex overflowed by 60 pixels on the right.

Décomposez le message en trois parties. RenderFlex est un Row ou une Column. 60 pixels indique de combien les enfants sont trop grands. À droite signifie que la ligne est trop large ; en bas signifie que la colonne est trop haute.

Le nombre résulte d’un simple calcul. Trois boîtes de 150 pixels de large nécessitent 450 pixels ; le téléphone en offre 390, donc 60 pixels débordent. Réduisez la taille totale des enfants de 60 pixels et les bandes disparaîtront.

Tous les tests de ce cours s’exécutent sur un téléphone de 390 pixels de large ; un débordement fait donc échouer le test avec le même message.

Défi

Facile

Appuie sur Exécuter et repère les bandes sur le bord droit. Ensuite, donne à chaque tuile une largeur de 120 pixels pour que les trois tiennent sur le téléphone.

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('Trips')),
        body: Column(
          children: [
            Row(
              children: [
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.orange,
                  child: const Center(child: Text('Beach')),
                ),
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.green,
                  child: const Center(child: Text('Forest')),
                ),
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.blueGrey,
                  child: const Center(child: Text('City')),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}