Using Scrollbars in Flutter – A Complete Guide

🧭 Using Scrollbars in Flutter – A Complete Guide

In mobile apps, content often exceeds the screen size. That’s where scrolling comes in. Flutter makes scrolling easy with widgets like ListView and SingleChildScrollView. But sometimes you want a visible scrollbar to let users know there's more content to explore.

---

🤔 Why Use Scrollbars in Flutter?

To improve user experience on large content screens
To help users see how far they’ve scrolled
For better accessibility and interaction (especially on web/desktop)

---

🛠️ Basic Scrollbar Example

Let’s start with a simple example: a list of items with a scrollbar.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ScrollbarExample(),
    );
  }
}

class ScrollbarExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Scrollbar Example')),
      body: Scrollbar(
        child: ListView.builder(
          itemCount: 50,
          itemBuilder: (context, index) {
            return ListTile(title: Text('Item \$index'));
          },
        ),
      ),
    );
  }
}

💡 Tip: By default, the scrollbar appears only when scrolling starts. For a persistent scrollbar, use thumbVisibility: true.

---

🎯 Scrollbar with SingleChildScrollView

If you’re using SingleChildScrollView instead of ListView, wrap both in a Scrollbar and attach a ScrollController.

class MyScrollView extends StatelessWidget {
  final ScrollController _controller = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Custom Scroll View')),
      body: Scrollbar(
        controller: _controller,
        thumbVisibility: true,
        child: SingleChildScrollView(
          controller: _controller,
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              children: List.generate(
                40,
                (index) => Text('Line \$index', style: TextStyle(fontSize: 20)),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

---

🧩 Scrollbar with Custom Styling

Want a colorful, thicker scrollbar? You can do that too!

Scrollbar(
  controller: _controller,
  thumbVisibility: true,
  thickness: 10,
  radius: Radius.circular(20),
  interactive: true,
  trackVisibility: true,
  scrollbarOrientation: ScrollbarOrientation.right,
  child: ListView(
    controller: _controller,
    children: List.generate(30, (i) => ListTile(title: Text('Item \$i'))),
  ),
)

---

🧠 ScrollController – The Backbone of Scrolling

Whenever you want full control over scrolling, like syncing a scrollbar with scroll position, use a ScrollController. Don’t forget to dispose it in stateful widgets!

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final ScrollController _controller = ScrollController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scrollbar(
      controller: _controller,
      thumbVisibility: true,
      child: ListView(
        controller: _controller,
        children: [...],
      ),
    );
  }
}

---

🖥️ Scrollbars on Web/Desktop

Flutter web and desktop apps behave more like traditional applications. Scrollbars are especially useful here. You might want them always visible:

Scrollbar(
  thumbVisibility: true, // Always show thumb
  interactive: true,
  child: ListView(...),
)

---

🚫 Common Mistakes

Not assigning a ScrollController to both the Scrollbar and scrollable child
Forgetting to dispose ScrollController in StatefulWidgets
Using Scrollbar without actual scrolling content

---

🚀 Summary

Scrollbars improve the user experience, especially on large screens or for accessibility. Use them with ListView, SingleChildScrollView, or even CustomScrollView. You can customize them easily with Flutter’s built-in properties.

---