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. We have to wrap SingleChildScrollView widget and ListView widget in Scrollbar() widget to enable Material style scrollbar.
Contents in this project Enable Show Scrollbar Indicator in ScrollView in Flutter Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp class using void main runApp() method.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main widget class named as MyApp extends with StatelessWidget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create Scaffold widget -> SafeArea widget in Widget build area in MyApp class.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: ) ) ); } } |
5. Create ScrollBar widget in SafeArea widget. The Scrollbar widget enables Scroll indicator in ScrollView.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Scrollbar( child: ) ) ) ); } } |
6. Create SingleChildScrollView widget inside Scrollbar widget. We would create column widget in SingleChildScrollView.
|
1 2 3 4 5 6 7 8 9 |
Scrollbar( child: SingleChildScrollView( child: Column( children: <Widget>[ ], ), ), ) |
7. Creating multiple Container View, Text widget and Image widget in Column widget.
|
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 |
Scrollbar( child: SingleChildScrollView( child: Column( children: <Widget>[ Container( color: Colors.pink, // Yellow height: 120.0, ), Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 300, height: 200, fit: BoxFit.contain), Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/sample_img.png', width: 200, fit: BoxFit.contain), Container( color: Colors.blue, // Yellow height: 120.0, ), Text('Some Sample Text - 1', style: TextStyle(fontSize: 28)), Container( color: Colors.orange, // Yellow height: 120.0, ), Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 300, height: 200, fit: BoxFit.contain), Text('Some Sample Text - 2', style: TextStyle(fontSize: 28)), Text('Some Sample Text - 3', style: TextStyle(fontSize: 28)), ], ), ), ) |
8. Complete source code for main.dart file:
|
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 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Scrollbar( child: SingleChildScrollView( child: Column( children: <Widget>[ Container( color: Colors.pink, // Yellow height: 120.0, ), Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 300, height: 200, fit: BoxFit.contain), Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/sample_img.png', width: 200, fit: BoxFit.contain), Container( color: Colors.blue, // Yellow height: 120.0, ), Text('Some Sample Text - 1', style: TextStyle(fontSize: 28)), Container( color: Colors.orange, // Yellow height: 120.0, ), Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 300, height: 200, fit: BoxFit.contain), Text('Some Sample Text - 2', style: TextStyle(fontSize: 28)), Text('Some Sample Text - 3', style: TextStyle(fontSize: 28)), ], ), ), ) ) ) ); } } |
Screenshot:
