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(),
)
)
)
);
}
}
In this way, you can show scrollbar on scrolling widgets like SingleChildScrollView and ListView in Flutter App.
Please Wait...
No any Comments on this Article