How to Show Scrollbar on SingleChildScrollView and ListView in Flutter

In this example, we are going to show you how to show the scrollbar on SingleChildScrollView and ListView widgets in the Flutter app. The scrollbar is a needy component of Scroll View to show your users the position of scrolling.

Scrollbar(
        isAlwaysShown: true, //always show scrollbar
        thickness: 10, //width of scrollbar
        radius: Radius.circular(20), //corner radius of scrollbar
        scrollbarOrientation: ScrollbarOrientation.left, //which side to show scrollbar
        child:SingleChildScrollView()
)

You should wrap SingleChildScrollView with Scrollbar to show a scrollbar, you can configure the location, widget of the scrollbar.

Scrollbar(
    isAlwaysShown: true, //always show scrollbar
    thickness: 10, //width of scrollbar
    radius: Radius.circular(20), //corner radius of scrollbar
    scrollbarOrientation: ScrollbarOrientation.left, //which side to show scrollbar
    child:ListView()
)

Wrap ListView() widget with Scrollbar() widget to show scrollbar on ListView in Flutter App.

Read this also: How to Get Scroll Position Offset in Flutter

import 'package:flutter/material.dart';

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

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

class Home extends  StatefulWidget {
  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {

    List<String> countries = ["USA", "United Kingdom", "China", "Russia", "Brazil",
                              "India", "Pakistan", "Nepal", "Bangladesh", "Sri Lanka",
                              "Japan", "South Korea", "Mongolia"];

    return Scaffold(
         appBar: AppBar(
            title: Text("Show Scrollbar in Flutter"),
            backgroundColor: Colors.redAccent
         ),
          body: Container(
            alignment: Alignment.center,
            padding: EdgeInsets.all(20),
             child: Scrollbar(
                  isAlwaysShown: true, //always show scrollbar
                  thickness: 10, //width of scrollbar
                  radius: Radius.circular(20), //corner radius of scrollbar
                  scrollbarOrientation: ScrollbarOrientation.left, //which side to show scrollbar
                  child:ListView(
                    children: countries.map((country){
                        return Card( 
                          child:ListTile(
                              title: Text(country)
                          )
                        );
                    }).toList(),
                )
              )
          )
    );
  } 
}