O Erro de Overflow

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

A tela de um celular é pequena. Quando os filhos de uma Row precisam de mais largura do que a tela tem, o Flutter desenha listras amarelas e pretas na borda onde eles ultrapassam os limites e imprime uma mensagem no Console:

A RenderFlex overflowed by 60 pixels on the right.

Leia a mensagem em três partes. RenderFlex é uma Row ou uma Column. 60 pixels é o quanto os filhos ultrapassam o limite. À direita significa que uma linha está larga demais; na parte inferior significa que uma coluna está alta demais.

O número é uma conta simples. Três caixas com 150 pixels de largura precisam de 450 pixels; o celular tem 390, então sobram 60 pixels para fora. Reduza a largura total dos filhos em 60 pixels e as listras desaparecem.

Todos os testes deste curso são executados em um celular com 390 pixels de largura, então um estouro faz o teste falhar com a mesma mensagem.

Desafio

Fácil

Pressione Run e encontre as listras na borda direita. Depois, deixe cada bloco com 120 pixels de largura, para que os três caibam no celular.

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