Исправление переполнения: прокрутка

Часть раздела Адаптивная компоновка путешествия по Flutter на Coddy. Урок 7 из 30.

Если в Column больше дочерних элементов, чем помещается на экране, содержимое выйдет за его нижнюю границу. Высота телефона ограничена, а Column не прокручивается сам по себе.

Оберни его в SingleChildScrollView. Тогда высота колонки может быть любой, а чтобы увидеть остальное, проведи пальцем по экрану:

SingleChildScrollView(
  child: Column(
    children: [
      // сколько угодно дочерних элементов
    ],
  ),
)

Это исправление для страницы, которая длиннее экрана: страницы настроек, формы, статьи. Для длинного списка однотипных элементов ту же задачу выполняет уже знакомый тебе ListView.

Область прокрутки оборачивает всю колонку. Если обернуть каждого дочернего элемента в отдельную область прокрутки, высота колонки останется прежней.

Задание

Легко

Неделя выходит за нижнюю границу экрана. Сделай страницу прокручиваемой, чтобы можно было добраться до Sunday.

Попробуйте сами

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