Cupertino Scrollbar Flutter Example

This article explains you how to use cupertino scrollbar in flutter application. You can also check out flutter cupertino widgets related articles.

To integrate iOS style scrollbar in flutter application, we need to use cupertino widget. Scrollbar display user how long view is. So user can scroll bottom to view entire UI. CupertinoScrollbar widget has many properties to customize scrollbar in mobile app. radius property is used to set radius of shape of scrollbar thumb.

radiusWhileDragging property is used to set radius of scrollbar shape when scrollbar is dragged by user. When user stops dragging scrollbar, radius value is changed to default value. thickness property is used to set thickness of scrollbar widget.

thicknessWhileDragging property is used to set thickness of scrollbar when it is dragged by user. child property is used to assign any widget as child under scrollbar widget. If we need to add multiple child widgets then we need to use row or column widget as child widget in cupertino scrollbar. key property is used to control scrollbar widget.

If we want to display scrollbar widget consistently in mobile app then we need to give value true to isAlwaysShown property of CupertinoScrollbar widget. controller property is used to handle dragging functionality of scrollbar widget. In this flutter example, we are displaying football players names in listview widget under cupertino scrollbar widget as below.

Flutter Cupertino Scrollbar

import ‘package:flutter/cupertino.dart’;
import ‘package:flutter/material.dart’;

class MyCupertinoScrollbarScreen extends StatefulWidget {
@override
_MyCupertinoScrollbarScreenState createState() => _MyCupertinoScrollbarScreenState();
}

class _MyCupertinoScrollbarScreenState extends State<MyCupertinoScrollbarScreen> {
@override
Widget build(BuildContext context) {

List<String> listFootballPlayers = [‘Kevin De Bruyne’, ‘Virgil van Dijk’, ‘Son Heung-min’, ‘Trent Alexander-Arnold’, ‘Mohamed Salah’, ‘Bruno Fernandes’, ‘Kasper Schmeichel’, ‘Jamie Vardy’, ‘Aubameyang’, ‘Harry Kane’];

return Scaffold(
appBar: AppBar(title: Text(‘Flutter Cupertino Scrollbar Sample’)),
body: CupertinoScrollbar(
    thickness: 15,
    thicknessWhileDragging: 10,
    isAlwaysShown: true,
    radius: Radius.circular(12),
    child: ListView.builder(
        itemCount: listFootballPlayers.length,
        itemBuilder: (context, index) => Card(
        color: Colors.deepOrangeAccent,
        child: Padding(
            padding: const EdgeInsets.all(20),
            child: Center(
                child: Text(
                    listFootballPlayers[index],
                    style: TextStyle(fontSize: 30, color: Colors.white),
                ),
            ),
        ),
    ),
)),
);
}
}