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:
|
1 2 3 4 5 6 7 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
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
Be the first to comment.