Correção de Overflow: Rolagem

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

Uma Column com mais filhos do que cabem na tela transborda na parte de baixo. O celular tem uma altura limitada, e uma Column não rola sozinha.

Envolva-a em uma SingleChildScrollView. Assim, a coluna pode ter a altura necessária, e você arrasta a tela para ver o restante:

SingleChildScrollView(
  child: Column(
    children: [
      // quantos elementos filhos você quiser
    ],
  ),
)

Essa é a solução para uma página mais longa do que a tela: uma página de configurações, um formulário, um artigo. Para uma lista longa de itens do mesmo tipo, o ListView que você já conhece faz o mesmo trabalho.

A visualização rolável envolve a coluna inteira. Envolver cada filho em sua própria visualização rolável deixa a coluna com a mesma altura de antes.

Desafio

Fácil

A semana transborda na parte de baixo. Faça a página rolar para que você possa chegar até Sunday.

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) {
    final days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('This Week')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              for (final day in days)
                Container(
                  height: 120,
                  margin: const EdgeInsets.only(bottom: 12),
                  decoration: BoxDecoration(
                    color: Colors.lightBlue.shade100,
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Center(child: Text(day, style: const TextStyle(fontSize: 20))),
                ),
            ],
          ),
        ),
      ),
    );
  }
}