Solución al desbordamiento: expandir

Parte de la sección Diseños que se adaptan del Journey de Flutter de Coddy. Lección 6 de 30.

Un Text dentro de un Row quiere ocupar una sola línea larga. Cuando la línea es más larga que la fila, el contenido se desborda por la derecha, aunque el texto podría haberse ajustado.

El texto no se ajusta porque la fila permite que cada elemento secundario tenga el ancho que quiera. Envuelve el texto en Expanded y obtendrá un ancho: exactamente el espacio que dejan los demás elementos secundarios. Un texto con un ancho definido se ajusta a más líneas.

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

Esta es la primera solución para un desbordamiento por la derecha: dale un Expanded al elemento secundario que debería encogerse. Envolver un widget que ya es pequeño, como un icono, no cambia nada para el texto largo.

Desafío

Fácil

La dirección de entrega se sale por el borde derecho. Haz que se divida en más líneas, manteniendo la flecha en el borde derecho de la fila.

Pruébalo tú mismo

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