Flutter Scrolling Widgets

This tutorial covers Flutter Scrolling Widgets with examples to create scrollable content for various use cases. Learn how to use SingleChildScrollView, Scrollbar, CustomScrollView, Scrollable, and RefreshIndicator.

Basic file setup

Create a new Flutter project or open an existing one. We will add examples of each button in the main.dart file.

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body:  Center(
          child: //add code here
        )
        ),
      );
  }
}

SingleChildScrollView

The SingleChildScrollView widget makes a single child scrollable when its content overflows.

SingleChildScrollViewExample.dart

import 'package:flutter/material.dart';

class SingleChildScrollViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("SingleChildScrollView Example")),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16),
        child: Column(
          children: List.generate(20, (index) {
            return Container(
              margin: EdgeInsets.symmetric(vertical: 8),
              color: Colors.blueAccent,
              height: 50,
              child: Center(
                child: Text("Item ${index + 1}", style: TextStyle(color: Colors.white)),
              ),
            );
          }),
        ),
      ),
    );
  }
}

main.dart

import 'package:basic_widgets/SingleChildScrollViewExample.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body:  Center(
          child: SingleChildScrollViewExample()//add code here
        )
        ),
      );
  }
}

Key Points:

• Use SingleChildScrollView for layouts where only one widget needs to scroll.
• Combine with a Column or Row for vertical or horizontal scrolling.

ScrollBar

The Scrollbar widget adds a visible scrollbar to a scrollable widget.

ScrollbarExample.dart

import 'package:flutter/material.dart';

class ScrollbarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Scrollbar Example")),
      body: Scrollbar(
        thumbVisibility: true, // Always show the scrollbar thumb
        child: ListView.builder(
          padding: EdgeInsets.all(16),
          itemCount: 50,
          itemBuilder: (context, index) {
            return Container(
              margin: EdgeInsets.symmetric(vertical: 8),
              color: Colors.greenAccent,
              height: 50,
              child: Center(
                child: Text("List Item ${index + 1}"),
              ),
            );
          },
        ),
      ),
    );
  }
}

main.dart

import 'package:basic_widgets/ScrollbarExample.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body:  Center(
          child:ScrollbarExample()//add code here
        )
        ),
      );
  }
}

Key Points:

• Use Scrollbar to make the scroll behavior more user-friendly.
• Set thumbVisibility: true to make the scrollbar thumb always visible.

CustomScrollView

The CustomScrollView allows creating a scrollable area with multiple slivers (scrollable regions).

CustomScrollViewExample.dart

import 'package:flutter/material.dart';

class CustomScrollViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("CustomScrollView Example")),
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 200,
            floating: true,
            flexibleSpace: FlexibleSpaceBar(
              title: Text("Sliver Header"),
              background: Image.network(
                "https://picsum.photos/400",
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(
                title: Text("Item ${index + 1}"),
              ),
              childCount: 30,
            ),
          ),
        ],
      ),
    );
  }
}

main.dart

import 'package:basic_widgets/CustomScrollViewExample.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body:  Center(
          child:CustomScrollViewExample()//add code here
        )
        ),
      );
  }
}

Key Points:

• SliverAppBar: A scrollable app bar.
• SliverList: A scrollable list within a CustomScrollView.