Correction du débordement : faire défiler

Fait partie de la section Des mises en page adaptées du Journey Flutter de Coddy. Leçon 7 sur 30.

Une Column avec plus d’enfants que l’écran ne peut en contenir déborde en bas. Le téléphone n’a qu’une certaine hauteur, et une Column ne défile jamais toute seule.

Enveloppe-la dans une SingleChildScrollView. La colonne peut alors être aussi haute que nécessaire, et tu fais glisser l’écran pour voir la suite :

SingleChildScrollView(
  child: Column(
    children: [
      // autant d’enfants que vous le souhaitez
    ],
  ),
)

C’est la solution pour une page plus longue que l’écran : une page de paramètres, un formulaire, un article. Pour une longue liste d’éléments du même type, le ListView que tu connais déjà fait la même chose.

La vue défilante entoure toute la colonne. Envelopper chaque enfant dans sa propre vue défilante laisse la colonne aussi haute qu’avant.

Défi

Facile

La semaine déborde en bas. Faites défiler la page pour pouvoir atteindre Sunday.

Essayez vous-même

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