SingleChildScrollView Widget

SingleChildScrollView is a widget in Flutter that allows a single child to be scrolled. It is often used when there is not enough space to display the child in a single view.

Let's understand the codebase below, which has a Column which has children overlapping (imagine this Column as a single Container with content that eventually overlaps rather than a list of widgets). Because of the overlap, there's an overflow error.

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,home: MyApp(),
  ));
}

const colors = [
  Colors.red,Colors.blueAccent,
  Colors.yellowAccent,Colors.orangeAccent,
  Colors.purpleAccent,Colors.pinkAccent,
  Colors.indigoAccent,Colors.greenAccent,
  Colors.cyanAccent
];

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        ...List.generate(9,((index) =>
                ColChild(color: colors[index], content: "Hello $index")))
      ],
    ));
  }
}

class ColChild extends StatelessWidget {
  final Color color;
  final String content;
  const ColChild({super.key, 
  required this.color, required this.content});
  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      height: 150.0,
      child: Text(
        content,
        style: const TextStyle(fontWeight: FontWeight.bold),
      ),
    );
  }
}

To solve for this, the Column widget is wrapped in SingleChildScrollView, hence allowing the widget, in case there's an overlap or let's say the app is installed in a phone of smaller screen size, then it will be scrollable.

// ...
return Scaffold(
    body: SingleChildScrollView(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      ...List.generate(
          9,
          ((index) =>
              ColChild(color: colors[index], content: "Hello $index")))
    ],
  ),
));
// ...

You'll find several applicable instances where any other scrollable widgets won't be optimal and only the SingleChildScrollView will be used.