A scrollbar is an interaction technique in which continuous information/data (text, pictures, or any other type of content) can be scrolled in a predetermined direction (up, down, left, or right). By default scroll direction is vertical.
Table of Contents :
What is a scrollview widget? — Explained
Scrollbar — Introduction:
A vertical scroll bar gives the user the ability to scroll the content of a window up and down. Similarly, a horizontal scroll bar lets the user scroll the content from left to right.
Flutter has a few widgets that allow users to create a scrollable list of items. If the list is quite long, using a scrollbar would be the best option here which will make the user more comfortable with the interface.
However, The flutter’s ScrollView widgets (e.g. ListView, GridView, CustomScrollView) does not display any scroll bar by default. Fortunately, Flutter makes it very easy to display a scrollbar. We can use a ScrollBar widget and pass to it a widget that contains ScrollView as its child.
What is a ScrollView Widget?
A ScrollView is a widget that creates custom scroll effects using slivers. A container for a Scrollable that responds to drag gestures until a limit is reached, and then scrolling.
Following are a few scroll view examples:-
- SingleChildScrollView
- ListView
- GridView
- PageView
- ReorderableListView
- NotificationListener and etc
> SingleChildScrollView:-
This widget is useful when you have a box that contains a single widget that can be scrolled. For instance, a clock faces a time picker. But there’s something you need to make sure is that it can only be scrolled if the container gets too small in one/both axes (the scroll direction). To know more, click here.
> ListView:-
ListView is the most common scrolling widget. It displays its children’s items one after the other in the scroll direction(vertical by default). In the cross-axis, the children are supposed to fill up the ListView.
> GridView:-
A 2D arrangement of widgets that can be scrolled.
As the name suggests, you’ll see it being used wherever we want to present widgets in a Grid format. We can select the item we desire from the grid list by clicking on them. To know more, click here.
> PageView:-
A list that is scrollable and works page by page. Each child of a page view is forced to be the same size as the viewport.
PageController is what we use to control which page should be visible in the view. It makes users able to control the pixel offset of the content of the PageView. Along with that it also lets you control the offset in terms of pages, which are increments of the viewport size.
> ReorderableListView:-
A list in which a user can interactively reorder its elements/items by drag and drop. The onReorder parameter is what we require which will be called when a child widget is dragged and dropped to a new position. To know more, click here.
> NotificationListener:-
NotificationListener<T extends Notification>
It’s a widget that listens for Notifications bubbling over the tree. Notifications will activate the onNotification callback only when their runtimeType is a subtype of T.
Use the Notification. dispatch method for dispatching notifications.
Code Implement:-
We’ll see a demo code that will implement a Scrollbar in it.
> Constructor:-
Scrollbar({
Key? key,
required Widget child,
ScrollController? controller,
bool? thumbVisibility,
bool? trackVisibility,
double? thickness,
Radius? radius,
ScrollNotificationPredicate? notificationPredicate,
bool? interactive,
ScrollbarOrientation? scrollbarOrientation,
})Let’s use it in our demo project.
Code:-
Expanded(
child: Scrollbar(
thickness: 20,
thumbVisibility: true,
trackVisibility: true,
interactive: true,
radius: const Radius.circular(15),
child: ListView.builder(...),
),
)The demo project is for Flutter Web i.e., We’ll be able to see our scrollbar in Chrome(web). It doesn’t make any difference from the emulator view of the project or even it might be more fun.
Here, we will be using ListView as our ScrollView widget. We just need to wrap it with our ScrollBar to get it visible along with the list.
I’ve used a few parameters of the Scrollbar such as thickness (double?) which is responsible for setting the thickness of our scrollbar, and thumbVisibility (bool?) which is responsible to make sure that the scrollbar thumb should be visible, even when a scroll is not ongoing, trackVisibility (bool?) which indicates that the scrollbar track/path should be visible, interactive (bool?) indicates that scrollbar should be interactive and give response to dragging on the thumb or tapping in the track/path area, radius (Radius?) to make scrollbar thumb’s corners rounded and some other parameters make scrollbar more interactive with the user.
ListView.builder is the most common named constructor of ListView which we use when we want to create a list recursively without writing code again and again.
ListView.builder creates a scrollable, linear array of widgets. We get here a parameter named itemCount where we pass an integer value and many times the ListView.builder will execute the same lines of code we pass to another parameter named as itemBuilder.
The code of the below project will give the best understanding with ListeView. builder.
Code File:-
- main. dart —
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => LandingScreenProvider()),
ChangeNotifierProvider(create: (_) => FeedbackScreenProvider()),
ChangeNotifierProvider(create: (_) => RatingScreenProvider()),
],
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: const LandingScreen()
),
);
}
}- LandingScreen.dart —
body: Container(
padding: const EdgeInsets.only(
left: padding, right: padding, bottom: padding, top: 10),
width: size.width,
height: size.height,
child: ChangeNotifierProvider.value(
value: _landingScreenProvider,
child: Consumer<LandingScreenProvider>(
builder: (_, landingScreenProvider, __) {
print(" Loaded:${landingScreenProvider.isLoaded}");
return landingScreenProvider.isLoaded
? const Center(child: CircularProgressIndicator())
: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Padding(
padding: EdgeInsets.symmetric(
horizontal: padding)),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: () {
scaffoldKey.currentState?.openDrawer();
},
child: const BorderBox(
width: 50,
height: 50,
child:
Icon(Icons.menu, color: Colors.black),
),
),
GestureDetector(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) =>
const SettingsScreen()));
},
child: const BorderBox(
width: 50,
height: 50,
child: Icon(Icons.settings,
color: Colors.black),
),
),
],
),
const Padding(padding: EdgeInsets.all(7)),
Text("City",
style: themeData.textTheme.bodyText2),
const Padding(padding: EdgeInsets.all(7)),
Text(
"Himachal Pradesh",
style: TextStyle(
fontSize: 50,
color: Colors.indigo.shade900,
fontWeight: FontWeight.w600),
),
const Padding(padding: EdgeInsets.all(7)),
const Divider(
// height: padding,
color: Colors.grey,
thickness: 0.7,
),
const SizedBox(
height: 5,
),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
physics: const BouncingScrollPhysics(),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
"<\$220,000",
"For Sale",
"3-4 Beds",
">1000 sqft"
]
.map((filters) =>
ChooseOption(text: filters))
.toList(),
),
),
const SizedBox(
height: 10,
),
Expanded(
child: Scrollbar(
thickness: 20,
thumbVisibility: true,
trackVisibility: true,
interactive: true,
radius: const Radius.circular(15),
child: ListView.builder(
physics: const BouncingScrollPhysics(),
itemCount: imageItems.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => Dummy(
imagesListModel:
imageItems[
index])));
},
child: ListBuilder(
itemData: imageItems[index],
index: index));
}),
),
)
],
),
],
);
}),
),
),Conclusion:-
In this article, I have explained the Scrollbar widget, its uses, and almost all the related topics of it. We understood the implementation of the scrollbar with its parameters in the demo project. You can now make your version of the demo project.
❤ ❤ 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! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
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.
