Today mobile users expect their apps should have a beautiful UI design, smooth animations, and great performance. To achieve this developer needs to create a new feature without compromising on quality and performance. That’s why Google build Flutter.
Flutter allows you to make lovely, natively compiled applications. The explanation Flutter can do this is that Flutter loves Material. Material is a plan framework that helps assemble high-quality, digital encounters. As UI configuration keeps developing, Material keeps on refreshing its components, motion, and plan framework.
In this article, I’ll explain how to show Scrollbar in a scrollable widget in Flutter. We’ll need enough information on a single screen. So, here we need something to scroll up and scroll down.
Table of Contents :
What is Flutter?
Flutter is Google’s open-source UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
If you want to explore more about Flutter, please visit Flutter’s official website to get more information.
Widgets:
Widget is a way to declare UI in a flutter. Flutter provides several widgets that help you build apps that follow Material Design that takes inspiration from React. The central idea is that you build your UI out of widgets. Widgets describe what their view should look like given their current configuration and state.
Scrollbar:
By default, scrollable widgets in Flutter don’t show a scrollbar. To add a scrollbar to a ScrollView, wrap the scroll view widget in a Scrollbar widget. Using this widget we can scroll a widget.
The scrollbar allows the user to jump into the particular points and also shows how far the user reaches.
For more info on Scrollbar Widget ,Watch this video By Flutter :
Constructor:
Creates a material design scrollbar that by default will connect to the closest Scrollable descendant of the child.
Scrollbar(
{Key? key,
required Widget child,
ScrollController? controller,
bool? isAlwaysShown,bool? showTrackOnHover,
double? hoverThickness,double? thickness,
Radius? radius,
ScrollNotificationPredicate? notificationPredicate}
),Code implementation:
Let’s move on the coding part
In this snippet, We used listview and wrapped it into Scrollbar. In this, isAlwaysShown is a bool it indicates that the scrollbar should be visible, even when a scroll is not underway, and showTrackOnHover Controls if the track will show on hover and remain, including during drag.
Expanded(
child: Scrollbar(
isAlwaysShown: _isAlwaysShown,
showTrackOnHover: _showTrackOnHover,
child: ListView.builder(
itemCount: 20,
itemBuilder: (context, index) => MyItem(index),
),
),
),We will add ListView.builder() method. In this method, we will add itemCount was a non-null and tells the ListView how many list items there will be. itemBuilder’ will be called distinctly with indices greater than or equivalent to zero and not exactly ‘itemCount.’ The function provides the BuildContext as the context parameter and the item position as the index parameter. The whole code will be defined in below code file.
Code File:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primaryColor: Colors.white,
),
debugShowCheckedModeBanner: false,
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _isAlwaysShown = true;
bool _showTrackOnHover = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Scrollbar Demo' ),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Scrollbar(
isAlwaysShown: _isAlwaysShown,
showTrackOnHover: _showTrackOnHover,
hoverThickness: 30.0,
child: ListView.builder(
itemCount: 20,
itemBuilder: (context, index) => MyItem(index),
),
),
),
Divider(height: 1),
],
),
);
}
}
class MyItem extends StatelessWidget {
final int index;
const MyItem(this.index);
@override
Widget build(BuildContext context) {
final color = Colors.primaries[index % Colors.primaries.length];
final hexRgb = color.shade500.toString().substring(10, 16).toUpperCase();
return ListTile(
contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
leading: AspectRatio(
aspectRatio: 1,
child: Container(
color: color,
)),
title: Text('Material Color #${index + 1}'),
subtitle: Text('#$hexRgb'),
);
}
}When we run the application, we ought to get the screen’s output like the underneath screen video.
Conclusion:
In this article, I have explained the Scrollbar widget demo, which you can modify and experiment with according to your own. This little introduction was about adding a scrollbar in the Scrollable widget.
I hope this blog will provide you with sufficient information in trying up Scrollbar Widgets in your flutter projects. We will show to add scrollbar in a Listview, jump into the particular point, and make a demo program for working Scrollbar in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
