Naprawa przepełnienia: przewijanie

Część sekcji Układ dopasowany do ekranu ścieżki Flutter w Coddy. Lekcja 7 z 30.

Element Column z większą liczbą elementów potomnych, niż mieści się na ekranie, przepełnia go u dołu. Telefon ma ograniczoną wysokość, a Column samodzielnie się nie przewija.

Owiń go w SingleChildScrollView. Kolumna może wtedy być tak wysoka, jak to konieczne, a resztę zobaczysz, przeciągając ekran:

SingleChildScrollView(
  child: Column(
    children: [
      // dowolna liczba elementów potomnych
    ],
  ),
)

To rozwiązanie sprawdza się w przypadku strony dłuższej niż ekran: strony ustawień, formularza czy artykułu. W przypadku długiej listy elementów tego samego rodzaju tę samą funkcję pełni znany Ci już ListView.

Widok przewijania obejmuje całą kolumnę. Owijając każde dziecko we własny widok przewijania, pozostawisz kolumnę tak samo wysoką jak wcześniej.

Wyzwanie

Łatwy

Tydzień wystaje poza dolną krawędź. Umożliw przewijanie strony, aby można było dotrzeć do Sunday.

Spróbuj swoich sił

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