Scroll Indicator in Flutter

Abdul Raheem

2 May 2023

Introduction of Scroll Indicator:

The default behaviour of the Scroll Indicator in Flutter (such as ListView, GridView, and CustomScrollView) is to not show a scroll bar. Fortunately, Flutter makes displaying a scrollbar quite simple. It is possible to utilise a ScrollBar widget and pass it to a widget that has a ScrollView child widget.

started. The scrollbar indicator is a vertical sidebar on ScrollView that shows the position of the screen at the moment.

The SingleChildScrollView widget and the ListView widget do not by default have Scroll enabled. But, we may enable Display Scrollbar Indicator in ScrollView in Flutter Android iOS App by using Scrollbar() widget.

You may also check our flutter app development services

Scrollbar widget:

Scrollbar(
        controller: _scrollController,
        thickness: 5,//According to your choice
        thumbVisibility: false, //
        radius: Radius.circular(5),
        child: ....
           )

Scrollbar(

controller: _scrollController,

thickness: 5,//According to your choice

thumbVisibility: false, //

radius: Radius.circular(5),

child: ....

)

>> ThumbVisibility if set to true then the indicator will always show on the screen if set to false then it will show only when the screen is scrolled

>>Use only one to use show the screen scroll indicator, isAlwaysShown and thumbVisibility.

Note that this solution (to wrap in Scrollbar) applies to any scrollable widget (for example SingleChildScrollView), not only to ListView. Set the isAlwaysShown param to true so that the scrollbar is visible even when not scrolling; however even if isAlwaysShown is true if there is no need for a scrollbar (because the scrollable content does not exceed its limits) the scrollbar will not be displayed

>> Using radius we can circle the corner of the indicator

>> Thickness manages the width of the indicator

>>screen scroll indicator height automatically manages the height of the screen and length of the product

main.dart:

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ScrollController _scrollController = ScrollController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      appBar: AppBar(
        title: Center(child: Text("Scrollbar Demo")),
      ),
      body: Scrollbar(
        controller: _scrollController,
        thickness: 5, //According to your choice
        thumbVisibility: true, //
        radius: Radius.circular(5),
        child: ListView.builder(
            itemCount: 100,
            itemBuilder: (BuildContext context, index) {
              return Card(
                child: Column(
                  children: [
                    Container(
                      height: MediaQuery.of(context).size.width / 10,
                      width: MediaQuery.of(context).size.width,
                      child: Center(child: Text("Webkul Demo " + "${index}")),
                    )
                  ],
                ),
              );
            }),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({super.key});

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

title: 'Flutter Demo',

theme: ThemeData(

primarySwatch: Colors.green,

home: const MyHomePage(),

);

}

class MyHomePage extends StatefulWidget {

const MyHomePage({Key? key}) : super(key: key);

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

ScrollController _scrollController = ScrollController();

@override

Widget build(BuildContext context) {

return Scaffold(

backgroundColor: Colors.grey[200],

appBar: AppBar(

title: Center(child: Text("Scrollbar Demo")),

body: Scrollbar(

controller: _scrollController,

thickness: 5, //According to your choice

thumbVisibility: true, //

radius: Radius.circular(5),

child: ListView.builder(

itemCount: 100,

itemBuilder: (BuildContext context, index) {

return Card(

child: Column(

children: [

Container(

height: MediaQuery.of(context).size.width / 10,

width: MediaQuery.of(context).size.width,

child: Center(child: Text("Webkul Demo " + "${index}")),

)

);

}),

);

}

Output:

https://mobikul.com/wp-content/uploads/2023/03/Screen-Recording-2023-03-23-at-4.04.04-PM-2.mov

Another Mentioned URL :

For more understanding please can go through this Link

Conclusion:

In this article, We have explained the screen scroll indicator in a flutter project.

screen scroll indicator helps to understand the height of the product list length

Thanks for reading this article

For more interesting blogs check here