How to Create Scrollable Layout in Flutter: Simple Guide

In Flutter, you create a scrollable layout by wrapping your content inside a SingleChildScrollView or using a ListView widget. These widgets allow the user to scroll when the content is larger than the screen.

Syntax

To make a layout scrollable, wrap your widgets inside a SingleChildScrollView or use a ListView. SingleChildScrollView is good for a small number of widgets, while ListView is optimized for long lists.

• SingleChildScrollView(child: Widget): Scrolls a single child widget vertically or horizontally.
• ListView(children: [Widgets]): Scrolls a list of widgets efficiently.

dart

SingleChildScrollView(
  child: Column(
    children: [
      // Your widgets here
    ],
  ),
)

// Or

ListView(
  children: [
    // Your widgets here
  ],
)

Example

This example shows a scrollable column of colored boxes using SingleChildScrollView. The user can scroll vertically to see all boxes.

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('Scrollable Layout Example')),
        body: SingleChildScrollView(
          child: Column(
            children: List.generate(20, (index) => Container(
              height: 100,
              color: index % 2 == 0 ? Colors.blue : Colors.green,
              alignment: Alignment.center,
              child: Text('Box $index', style: const TextStyle(color: Colors.white, fontSize: 20)),
            )),
          ),
        ),
      ),
    );
  }
}

Output

A screen with an app bar titled 'Scrollable Layout Example' and a vertical list of 20 colored boxes alternating blue and green that the user can scroll through.

Common Pitfalls

Common mistakes when creating scrollable layouts include:

• Not wrapping content in a scrollable widget, causing overflow errors.
• Using SingleChildScrollView with very large lists, which can cause performance issues.
• Placing scrollable widgets inside other scrollables without constraints, causing gesture conflicts.

Use ListView for long or dynamic lists and avoid nesting scrollables without proper configuration.

dart

/* Wrong: Overflow error because content is too tall and not scrollable */
Column(
  children: List.generate(50, (index) => Text('Item $index')),
)

/* Right: Wrap with SingleChildScrollView to enable scrolling */
SingleChildScrollView(
  child: Column(
    children: List.generate(50, (index) => Text('Item $index')),
  ),
)

Quick Reference

• SingleChildScrollView: Use for a small number of widgets that need scrolling.
• ListView: Use for long or dynamic lists for better performance.
• ScrollDirection: Both widgets support vertical (default) and horizontal scrolling.
• Physics: Customize scroll behavior with physics property.

Key Takeaways

Wrap content in SingleChildScrollView or use ListView to make layouts scrollable in Flutter.

Use SingleChildScrollView for small content and ListView for long or dynamic lists.

Avoid overflow errors by ensuring scrollable widgets wrap content that exceeds screen size.

Be careful nesting scrollable widgets to prevent gesture conflicts.

Customize scroll direction and behavior with widget properties like scrollDirection and physics.