Cupertino Scrollbar In Flutter
At whatever point you will code for building anything in Flutter, it will be inside a widget. The focal intention is to build the application out of widgets. It portrays how your application view should look with their present design and state.
In Flutter, scrollable widgets (ListView, GridView, and so on) have no scrollbar by default. A scrollbar shows a user how long a view is. It shows how far the user has scrolled from the top limit and lets the person in question rapidly leap to a specific point.
In this blog, we will explore the Cupertino Scrollbar In Flutter. We will see how to implement a Cupertino Scrollbar demo program and show how to use it in your flutter applications.
CupertinoScrollbar class – Cupertino library – Dart API
An iOS-style scrollbar. To add a scrollbar to a ScrollView, simply wrap the scroll view widget in a CupertinoScrollbar…api.flutter.dev
Table Of Contents::
Introduction:
CupertinoScrollbar Widget is an iOS-style Scrollbar. A Scrollbar is essentially used to scroll information in a versatile screen and it demonstrates what part of a Scrollable Widget is apparent.
Naturally, the CupertinoScrollbar Widget will stay draggable and it likewise utilizes PrimaryScrollController. If the child ScrollView is limitlessly long, the RawScrollbar won’t be painted. For this situation, the scrollbar can’t precisely address the general area of the apparent region or compute the exact delta to apply while dragging the thumb or tapping on the track.
Demo Module :
The above demo video shows how to use a Cupertino Scrollbar Widget in a flutter. It shows how the Cupertino Scrollbar Widget will work in your flutter applications. It shows when the code successfully runs, then the user slides the screen up and down, and the Cupertino scrollbar will show was a vertical line/thumb. It will be shown on your devices.
Constructor:
To utilize CupertinoScrollbar, you need to call the constructor underneath:
const CupertinoScrollbar({
Key? key,
required Widget child,
ScrollController? controller,
bool isAlwaysShown = false,
double thickness = defaultThickness,
this.thicknessWhileDragging = defaultThicknessWhileDragging,
Radius radius = defaultRadius,
this.radiusWhileDragging = defaultRadiusWhileDragging,
ScrollNotificationPredicate? notificationPredicate,
})
In the above Constructor, all fields marked with @required must not be empty.
Properties:
There are some properties of CupertinoScrollbar are:
- > Key: This property is used to control if it’s should be replaced.
- > Child: This property is used to the widget below this widget in the tree. Child Property will have only one child. To allocate multiple users needs to make use of Row Widget or Column Widget and wrap a child in it.
- > controller: This property is utilized to execute Scrollbar dragging. Assuming a ScrollController is passed, scrollbar dragging will be empowered on the given ScrollController. A stateful precursor of this CupertinoScrollbar needs to deal with the ScrollController and either pass it to a scrollable relative or utilize a PrimaryScrollController to share it.
- > isAlwaysShown: This property is utilized as a bool information type and it shows whether the Scrollbar ought to consistently be apparent. When false, the scrollbar will be displayed during scrolling and will fade out in any case. At the point when true, the scrollbar will consistently be noticeable and never fade out. The controller property should be set for this situation. It ought to be passed the pertinent Scrollable’s ScrollController.
- > thickness: This property is used to the thickness of the scrollbar.
- > radius: This property is used to set the shape of the scrollbar thumb (rounded corners).
- > thicknessWhileDragging: This property is used to the thickness of the scrollbar when it’s being dragged by the user. When the user starts dragging the scrollbar, the thickness will animate from [thickness] to this value, then animate back when the user stops dragging the scrollbar.
- > radiusWhileDragging: This property is used to the radius of the scrollbar edges when the scrollbar is being dragged by the user. When the user starts dragging the scrollbar, the radius will animate from [radius] to this value, then animate back when the user stops dragging the scrollbar.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
First, we will create a dummyData is equal to List generate, and in the bracket, we will add the number of count and index.
final List dummyData = List.generate(20, (index) => '$index');
In the body, we will add CupertinoScrollbar() widget. In this widget, we will add a thickness was 12, the radius was circular(10), isAlwaysShown was shown true. It’s child property, we will add ListView.builder(). Inside, we will add itemCount was dummyData.length and itemBuilder. In itemBuilder, we will add inside a Card widget(). In this widget, we will add color, add text was dummyData[index] and wrap it to its Center widget. Center widget wrap to its padding widget.
CupertinoScrollbar(
thickness: 12,
radius: Radius.circular(10),
thicknessWhileDragging: 8,
isAlwaysShown: true,
child: ListView.builder(
itemCount: dummyData.length,
itemBuilder: (context, index) => Card(
color: Colors.cyan[100],
child: Padding(
padding: const EdgeInsets.all(20),
child: Center(
child: Text(
dummyData[index],
style: TextStyle(fontSize: 30),
),
),
),
),
)),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cupertinoscrollbar_dem/splash.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Splash(),
);
}
}
class HomePage extends StatelessWidget {
final List dummyData = List.generate(20, (index) => '$index');
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.teal[200],
automaticallyImplyLeading: false,
title: Text('Flutter Cupertino Scrollbar Demo'),
),
body: CupertinoScrollbar(
thickness: 12,
radius: Radius.circular(10),
thicknessWhileDragging: 8,
isAlwaysShown: true,
child: ListView.builder(
itemCount: dummyData.length,
itemBuilder: (context, index) => Card(
color: Colors.cyan[100],
child: Padding(
padding: const EdgeInsets.all(20),
child: Center(
child: Text(
dummyData[index],
style: TextStyle(fontSize: 30),
),
),
),
),
)),
);
}
}
Conclusion:
In the article, I have explained the basic structure of the Cupertino Scrollbar in a flutter; you can modify this code according to your choice. This was a small introduction to Cupertino Scrollbar On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Cupertino Scrollbar in your flutter projects. We will show you what the Introduction is?. Show constructor and properties of the Cupertino Scrollbar. Make a demo program for working Cupertino Scrollbar. It shows when the user slides the screen up and down, then the Cupertino scrollbar will show was a vertical line/thumb. in your flutter application. 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.
