SingleChildScrollView Flutter: What It Is and How to Use It

SingleChildScrollView in Flutter is a widget that lets you make its single child scrollable when it overflows the available space. It is useful when you have a small content area that might not fit on the screen and you want the user to scroll to see all content.

How It Works

SingleChildScrollView works like a scrollable container that holds exactly one child widget. Imagine a long piece of paper inside a small frame; you can slide the paper up and down to see parts that don't fit in the frame. Similarly, this widget allows the user to scroll the child vertically or horizontally if it is bigger than the screen.

It measures the child's size and provides scrolling only when needed. This is different from other scrollable widgets that handle multiple children, as SingleChildScrollView is designed for a single widget that might be too big to fit.

Example

This example shows a column of text widgets inside a SingleChildScrollView. When the content is taller than the screen, you can scroll vertically to see all the text.

dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('SingleChildScrollView Example')),
        body: SingleChildScrollView(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: List.generate(
              20,
              (index) => Text('Line number ${index + 1}', style: const TextStyle(fontSize: 18)),
            ),
          ),
        ),
      ),
    );
  }
}

Output

A screen with an app bar titled 'SingleChildScrollView Example' and a vertical list of 20 lines of text that can be scrolled up and down.

When to Use

Use SingleChildScrollView when you have a single widget that might be larger than the screen and you want to allow scrolling. For example:

• A form with many input fields that may not fit on small screens.
• A column of text or images that can grow dynamically.
• Any content that needs to scroll but does not require complex list features like lazy loading.

It is not recommended for large lists or complex scrolling because it builds all children at once, which can affect performance.

Key Points

• SingleChildScrollView scrolls a single child widget when it overflows.
• It supports vertical or horizontal scrolling.
• Good for small, scrollable content like forms or text.
• Not optimized for large or infinite lists.
• Wraps the child and provides scrolling automatically.

Key Takeaways

SingleChildScrollView makes one child scrollable when it doesn't fit the screen.

Use it for small scrollable content like forms or text columns.

It is simple but not suitable for large lists or complex scrolling.

It scrolls vertically by default but can scroll horizontally too.

Wrap your content inside it to avoid overflow errors on small screens.