Correggere l’overflow: espandere

Fa parte della sezione Layout adattabili del percorso Flutter di Coddy. Lezione 6 di 30.

Un Text in una Row vuole stare su un'unica riga lunga. Quando la riga è più lunga della riga stessa, il contenuto fuoriesce a destra, anche se il testo potrebbe andare a capo.

Il testo non va a capo perché la riga lascia che ogni elemento figlio sia largo quanto vuole. Racchiudi il testo in Expanded e gli viene assegnata una larghezza: esattamente lo spazio lasciato dagli altri elementi figli. Un testo con una larghezza va a capo su più righe.

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

Questa è la prima soluzione per un contenuto che fuoriesce a destra: assegna un Expanded all'elemento figlio che dovrebbe restringersi. Racchiudere in un Expanded un widget già piccolo, come un'icona, non cambia nulla per il testo lungo.

Sfida

Facile

L’indirizzo di consegna supera il bordo destro. Fai in modo che vada a capo su più righe, mantenendo la freccia sul bordo destro della riga.

Provalo tu

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