How to have a scrollbar view in Flutter?

You can use this project

The pubspec.yaml

dev_dependencies:  flutter_test:    sdk: flutter  draggable_scrollbar: 0.0.4

The code:

import 'package:flutter/material.dart';import 'package:draggable_scrollbar/draggable_scrollbar.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {  ScrollController _rrectController = ScrollController();  @override  Widget build(BuildContext context) {    return MaterialApp(      title: "Test",      home: Scaffold(        body: Center(          child: DraggableScrollbar.rrect(            controller: _rrectController,            backgroundColor: Colors.blue,            child: ListView.builder(              controller: _rrectController,              itemCount: 100,              itemExtent: 100.0,              itemBuilder: (context, index) {                return Container(                  padding: EdgeInsets.all(8.0),                  child: Material(                    elevation: 4.0,                    borderRadius: BorderRadius.circular(4.0),                    color: Colors.green[index % 9 * 100],                    child: Center(                      child: Text(index.toString()),                    ),                  ),                );              },            ),          ),        ),      ),    );  }}

The result:

Flutter now has Scrollbar widget.

Just wrap SingleChildScrollView or any ScrollView widget with Scrollbar.

Code sample:

class HomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      body: Scrollbar(        // Child can also be SingleChildScrollView, GridView, etc.        child: ListView.builder(          itemCount: 20,          itemBuilder: (context, index) {            return ListTile(              title: Text('Index $index'),            );          },        ),      ),    );  }}

Scrollbar (Widget of the week) : https://youtu.be/DbkIQSvwnZc