Correggere l’overflow: scorrere

Fa parte della sezione Layout adattabili del percorso Flutter di Coddy. Lezione 7 di 30.

Una Column con più elementi di quanti lo schermo possa contenere trabocca nella parte inferiore. Il telefono ha un’altezza limitata e una Column non scorre mai da sola.

Racchiudila in una SingleChildScrollView. La colonna può quindi essere alta quanto serve e puoi trascinare lo schermo per vedere il resto:

SingleChildScrollView(
  child: Column(
    children: [
      // tutti i widget figli che vuoi
    ],
  ),
)

Questa è la soluzione per una pagina più lunga dello schermo: una pagina delle impostazioni, un modulo, un articolo. Per un elenco lungo di elementi dello stesso tipo, la ListView che già conosci svolge lo stesso compito.

La vista scorrevole va intorno all’intera colonna. Racchiudere ogni elemento figlio nella propria vista scorrevole lascia la colonna alta come prima.

Sfida

Facile

La settimana trabocca in basso. Rendi scorrevole la pagina, così puoi raggiungere Sunday.

Provalo tu

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