Ahmet Balaman LogoAhmet Balaman

Flutter: Using SingleChildScrollView and ScrollView

personAhmet Balaman
calendar_today
FlutterScrollViewSingleChildScrollViewListViewScrollingLayout

Screen sizes in mobile applications are limited, and content often does not fit on a single screen. In these cases, the content needs to be scrollable. The most basic way to achieve this in Flutter is the SingleChildScrollView widget.

Live Demo

You can try this widget in the interactive example below:

What is SingleChildScrollView?

It is a box that makes a single widget (usually a Column) scrollable.

Basic Usage

SingleChildScrollView(
  child: Column(
    children: [
      Container(height: 200, color: Colors.red),
      Container(height: 200, color: Colors.green),
      Container(height: 200, color: Colors.blue),
      Container(height: 200, color: Colors.yellow),
      // More content exceeding screen size...
    ],
  ),
)

If you don't use SingleChildScrollView and the content overflows the screen, you will get that famous "yellow and black striped" overflow error.

Horizontal Scrolling

You can scroll not only vertically but also horizontally.

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: [
      Container(width: 150, color: Colors.red),
      Container(width: 150, color: Colors.green),
      Container(width: 150, color: Colors.blue),
    ],
  ),
)

SingleChildScrollView vs ListView

A common mistake is using Column inside SingleChildScrollView for long lists. This is not performant because all items are rendered at once (even if not visible on screen).

  • SingleChildScrollView: For a small number of specific items (e.g., a form page or settings screen).
  • ListView: For large numbers or dynamic/list-type data. It renders only what is visible on the screen (lazy loading).

ListView Example:

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item $index'),
    );
  },
)

Scroll Physics

You can change the scrolling behavior.

  • BouncingScrollPhysics: iOS-style bouncing effect.
  • ClampingScrollPhysics: Android-style effect that stops at the end (blue glow).
SingleChildScrollView(
  physics: BouncingScrollPhysics(),
  child: Column(...)
)

Keyboard Issue and ScrollView

When using form fields (TextField), SingleChildScrollView is vital so that the screen is not compressed when the keyboard opens. It usually wraps the entire content, allowing the user to scroll to access the fields above when the keyboard is open.

Summary

  • Use SingleChildScrollView if your content does not fit on the screen.
  • You can determine the direction you want to scroll (scrollDirection).
  • If you are going to show hundreds of items of the same type (list), use ListView.
  • SingleChildScrollView is ideal for form screens.
arrow_backTüm Yazılar