El error de desbordamiento

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

La pantalla de un teléfono es pequeña. Cuando los elementos hijos de un Row necesitan más ancho del que tiene la pantalla, Flutter dibuja franjas amarillas y negras en el borde por donde se desbordan e imprime un mensaje en la consola:

A RenderFlex overflowed by 60 pixels on the right.

Interprétalo en tres partes. RenderFlex es un Row o un Column. 60 pixels es cuánto más grandes son los elementos hijos. On the right significa que una fila es demasiado ancha; on the bottom significa que una columna es demasiado alta.

El número es una simple operación aritmética. Tres cuadros de 150 píxeles de ancho necesitan 450 píxeles; el teléfono tiene 390, así que 60 píxeles se desbordan. Haz que los elementos hijos sean 60 píxeles más pequeños en total y las franjas desaparecerán.

Todas las comprobaciones de este curso se ejecutan en un teléfono de 390 píxeles de ancho, así que un desbordamiento hace que la comprobación falle con el mismo mensaje.

Desafío

Fácil

Presiona Run y encuentra las franjas en el borde derecho. Después, haz que cada mosaico tenga 120 píxeles de ancho, para que quepan los tres en el teléfono.

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