Correção de Overflow: Expandir

Parte da seção Layouts que se adaptam do Journey de Flutter da Coddy. Lição 6 de 30.

Um Text em uma Row quer ocupar uma única linha longa. Quando a linha é mais longa que a linha, a linha transborda à direita, embora o texto pudesse ter sido quebrado em várias linhas.

O texto não é quebrado porque a linha permite que cada filho tenha a largura que quiser. Envolva o texto em Expanded e ele receberá uma largura: exatamente o espaço que os outros filhos deixarem. Um texto com largura definida é quebrado em mais linhas.

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

Esta é a primeira solução para um transbordamento à direita: atribua um Expanded ao filho que deve encolher. Envolver um widget que já é pequeno, como um ícone, não muda nada para o texto longo.

Desafio

Fácil

O endereço de entrega ultrapassa a borda direita. Faça com que ele quebre em mais linhas, mantendo a seta na borda direita da linha.

Experimente você mesmo

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