SingleChildScrollView in Flutter

Introduction

SingleChildScrollView lets you scroll a single widget when it is too big to fit on the screen. It helps avoid content being cut off.

You have a column of text and buttons that might not fit on small screens.

You want to make a form scrollable so users can reach all fields.

You want to scroll an image or a list that is not very long.

You want to avoid overflow errors when content size changes dynamically.

Syntax

Flutter

SingleChildScrollView(
  scrollDirection: Axis.vertical,
  child: YourWidget(),
)

scrollDirection controls if scrolling is vertical or horizontal.

The child is the single widget that will scroll if needed.

Examples

A vertical scroll with a column of text lines.

Flutter

SingleChildScrollView(
  child: Column(
    children: [Text('Line 1'), Text('Line 2')],
  ),
)

A horizontal scroll with a row of icons.

Flutter

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: [Icon(Icons.star), Icon(Icons.star_border)],
  ),
)

Sample App

This app shows a list of 30 text items inside a SingleChildScrollView. You can scroll vertically to see all items.

Flutter

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(
          child: Column(
            children: List.generate(
              30,
              (index) => Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Item ${index + 1}', style: const TextStyle(fontSize: 20)),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Important Notes

SingleChildScrollView should have only one child widget.

Use it when you want simple scrolling for a small number of widgets.

For large or infinite lists, use ListView instead for better performance.

Summary

SingleChildScrollView makes one widget scrollable when it doesn't fit.

Set scrollDirection to vertical or horizontal.

Good for small scrollable areas like forms or short lists.