Enable Show Scrollbar Indicator Scrollview Using Flutter App

admin_img Posted By Bajarangi soft , Posted On 13-10-2020

Scrollbar indicator is a vertical side bar display on ScrollView which indicates current screen position using scroll indicator. Scrollbar also shows us how much scrolling screen is renaming on mobile screen. By default Scroll is not enabled in SingleChildScrollView widget and ListView widget. But using Scrollbar() widget we can Enable Show Scrollbar Indicator in ScrollView in Flutter Android iOS App.

Enable Show Scrollbar Indicator Scrollview Using Flutter App

Enable Show Scrollbar Indicator Scrollview
Complete Code For Enable Show Scrollbar Indicator Scrollview In Flutter
Main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
          backgroundColor: Colors.black,
          appBar: AppBar(
            centerTitle: true,
            backgroundColor: Colors.white,
            title: Text('Enable Show Scrollbar Indicator ScrollView',
              style: TextStyle(
              color: Colors.black
            )),
          ),
            body: SafeArea(
                child: Scrollbar(
                  child: SingleChildScrollView(
                    child: Column(
                      children: <Widget>[
                        Positioned(
                          bottom: 48.0,
                          left: 10.0,
                          right: 10.0,
                          child: Card(
                            color: Colors.pink,
                            elevation: 8.0,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(8.0),
                            ),
                            child: Column(
                              children: <Widget>[
                                Padding(
                                  padding: const EdgeInsets.all(16.0),
                                  child: Text(
                                    "India",
                                    style: TextStyle(
                                      fontSize: 20.0,
                                      fontWeight: FontWeight.bold,
                                      color: Colors.white
                                    ),
                                  ),
                                ),
                                Padding(
                                  padding: const EdgeInsets.all(16.0),
                                  child: Text(
                                      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",style: TextStyle(
                                    color: Colors.white
                                  ),),
                                ),
                              ],
                            ),
                          ),
                        ),
                        Positioned(
                          bottom: 48.0,
                          left: 10.0,
                          right: 10.0,
                          child: Card(
                            color: Colors.deepPurple,
                            elevation: 8.0,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(8.0),
                            ),
                            child: Column(
                              children: <Widget>[
                                Padding(
                                  padding: const EdgeInsets.all(16.0),
                                  child: Text(
                                    "India",
                                    style: TextStyle(
                                      fontSize: 20.0,
                                      fontWeight: FontWeight.bold,
                                        color: Colors.white
                                    ),
                                  ),
                                ),
                                Padding(
                                  padding: const EdgeInsets.all(16.0),
                                  child: Text(
                                      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",style: TextStyle(
                                    color: Colors.white
                                  ),),
                                ),
                              ],
                            ),
                          ),
                        ),
                        Positioned(
                          bottom: 48.0,
                          left: 10.0,
                          right: 10.0,
                          child: Card(
                            color: Colors.green,
                            elevation: 8.0,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(8.0),
                            ),
                            child: Column(
                              children: <Widget>[
                                Padding(
                                  padding: const EdgeInsets.all(16.0),
                                  child: Text(
                                    "India",
                                    style: TextStyle(
                                      fontSize: 20.0,
                                      fontWeight: FontWeight.bold,
                                      color: Colors.white
                                    ),
                                  ),
                                ),
                                Padding(
                                  padding: const EdgeInsets.all(16.0),
                                  child: Text(
                                      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",style: TextStyle(
                                    color: Colors.white
                                  ),),
                                ),
                              ],
                            ),
                          ),
                        ),
                        SizedBox(height: 10,),
                        Positioned(
                          bottom: 48.0,
                          left: 10.0,
                          right: 10.0,
                          child: Card(
                            color: Colors.red,
                            elevation: 8.0,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(8.0),
                            ),
                            child: Column(
                              children: <Widget>[
                                Padding(
                                  padding: const EdgeInsets.all(16.0),
                                  child: Text(
                                    "India",
                                    style: TextStyle(
                                      fontSize: 20.0,
                                      fontWeight: FontWeight.bold,
                                      color: Colors.white
                                    ),
                                  ),
                                ),
                                Padding(
                                  padding: const EdgeInsets.all(16.0),
                                  child: Text(
                                      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",style: TextStyle(
                                    color: Colors.white
                                  ),),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                )
            )
        )
    );
  }
}

Related Post