Solución al desbordamiento: desplazamiento

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

Una Column con más elementos secundarios de los que caben en la pantalla se desborda por abajo. El teléfono tiene una altura limitada, y una Column nunca se desplaza por sí sola.

Envuélvela en una SingleChildScrollView. Así, la columna puede tener la altura que necesite, y arrastras la pantalla para ver el resto:

SingleChildScrollView(
  child: Column(
    children: [
      // tantos elementos hijos como quieras
    ],
  ),
)

Esta es la solución para una página más larga que la pantalla: una página de configuración, un formulario, un artículo. Para una lista larga de elementos del mismo tipo, el ListView que ya conoces hace el mismo trabajo.

La vista desplazable va alrededor de toda la columna. Envolver cada elemento secundario en su propia vista desplazable deja la columna con la misma altura que antes.

Desafío

Fácil

La semana se desborda por la parte inferior. Haz que la página se pueda desplazar para que puedas llegar a Sunday.

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