Correction du débordement : agrandir

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

Un Text dans un Row veut tenir sur une seule longue ligne. Lorsque la ligne est plus longue que la rangée, elle déborde à droite, même si le texte aurait pu revenir à la ligne.

Le texte ne revient pas à la ligne parce que la rangée laisse chaque enfant être aussi large qu’il le souhaite. Encapsule le texte dans Expanded et il obtient une largeur : exactement l’espace laissé par les autres enfants. Un texte doté d’une largeur revient à la ligne sur plusieurs lignes.

Row(
  children: [
    const Icon(Icons.info),
    const Expanded(
      child: Text('A long sentence that now wraps instead of spilling out.'),
    ),
  ],
)

C’est la première solution à un débordement à droite : donne un Expanded à l’enfant qui doit rétrécir. Encapsuler un widget déjà petit, comme une icône, ne change rien pour le texte long.

Défi

Facile

L’adresse de livraison déborde du bord droit. Faites-la tenir sur davantage de lignes, en gardant la flèche sur le bord droit de la ligne.

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('Delivery')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Row(
                children: [
                  const Icon(Icons.location_on, color: Colors.red),
                  const SizedBox(width: 8),
                  const Text(
                    '221B Baker Street, Marylebone, London NW1 6XE, United Kingdom',
                  ),
                  const Icon(Icons.chevron_right),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}