Overflow Fix: Scrolling

Part of the Layout That Fits section of Coddy's Flutter journey. Lesson 7 of 30.

A Column with more children than the screen can hold overflows on the bottom. The phone is only so tall, and a Column never scrolls by itself.

Wrap it in a SingleChildScrollView. The column can then be as tall as it needs, and you drag the screen to see the rest:

SingleChildScrollView(
  child: Column(
    children: [
      // as many children as you like
    ],
  ),
)

This is the fix for a page that is longer than the screen: a settings page, a form, an article. For a long list of the same kind of item, the ListView you already know does the same job.

The scroll view goes around the whole column. Wrapping each child in its own scroll view leaves the column as tall as before.

Challenge

Easy

The week overflows on the bottom. Make the page scroll, so you can reach Sunday.

Try it yourself

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