Overflow beheben: Scrollen

Teil des Abschnitts Layouts für jede Bildschirmgröße der Flutter-Journey von Coddy. Lektion 7 von 30.

Eine Column mit mehr untergeordneten Widgets, als auf den Bildschirm passen, läuft unten über. Das Telefon ist nur so hoch, und eine Column scrollt nie von selbst.

Umschließe sie mit einer SingleChildScrollView. Die Spalte kann dann so hoch sein, wie sie sein muss, und du ziehst über den Bildschirm, um den Rest zu sehen:

SingleChildScrollView(
  child: Column(
    children: [
      // so viele untergeordnete Elemente, wie du möchtest
    ],
  ),
)

Das ist die Lösung für eine Seite, die länger als der Bildschirm ist: eine Einstellungsseite, ein Formular, ein Artikel. Für eine lange Liste mit Elementen derselben Art erfüllt die ListView, die du bereits kennst, denselben Zweck.

Die Scroll-Ansicht liegt um die gesamte Spalte herum. Wenn du jedes untergeordnete Widget in eine eigene Scroll-Ansicht einschließt, bleibt die Spalte genauso hoch wie zuvor.

Aufgabe

Einfach

Die Woche läuft unten über. Mach die Seite scrollbar, damit du Sunday erreichen kannst.

Probier es selbst

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