How to have a scrollbar view in Flutter?

Question

I want to have a scrollbar view like the one in the picture.

So how can I have it using flutter?

I've tried

SingleChildScrollView(
  ....
),

But no scroll bars appeared and I don't know to make them

Answer 1

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:

Answer 2

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

Answer 3

Wrap the scrollable widget with Scrollbar widget.

child: Scrollbar(
        isAlwaysShown: true,
        child: ListView(
         ....)
)

You can make it always shown.

watch this for further explanation. https://www.youtube.com/watch?v=DbkIQSvwnZc

Answer 4

Scrollbar(
  isAlwaysShown: true,
  showTrackOnHover: true,
  radius: Radius.circular(5),
  interactive: true,
  child: ListView.builder(shrinkWrap: true, itemCount: data.productionReportModel!.data!.length, itemBuilder: (context, index) {
    return Container();
  }),
),