CupertinoScrollbar class

This sample shows a CupertinoScrollbar that fades in and out of view as scrolling occurs. The scrollbar will fade into view as the user scrolls, and fade out when scrolling stops. The thickness of the scrollbar will animate from 6 pixels to the thicknessWhileDragging of 10 when it is dragged by the user. The radius of the scrollbar thumb corners will animate from 34 to the radiusWhileDragging of 0 when the scrollbar is being dragged by the user.

import 'package:cupertino_ui/cupertino_ui.dart';

/// Flutter code sample for [CupertinoScrollbar].

void main() => runApp(const ScrollbarApp());

class ScrollbarApp extends StatelessWidget {
  const ScrollbarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      theme: CupertinoThemeData(brightness: .light),
      home: ScrollbarExample(),
    );
  }
}

class ScrollbarExample extends StatelessWidget {
  const ScrollbarExample({super.key});

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('CupertinoScrollbar Sample'),
      ),
      child: CupertinoScrollbar(
        thickness: 6.0,
        thicknessWhileDragging: 10.0,
        radius: const .circular(34.0),
        radiusWhileDragging: Radius.zero,
        child: ListView.builder(
          itemCount: 120,
          itemBuilder: (BuildContext context, int index) {
            return Center(
              child: Padding(
                padding: const .all(8.0),
                child: Text('Item $index'),
              ),
            );
          },
        ),
      ),
    );
  }
}

When thumbVisibility is true, the scrollbar thumb will remain visible without the fade animation. This requires that a ScrollController is provided to controller, or that the PrimaryScrollController is available.

import 'package:cupertino_ui/cupertino_ui.dart';

/// Flutter code sample for [CupertinoScrollbar].

void main() => runApp(const ScrollbarApp());

class ScrollbarApp extends StatelessWidget {
  const ScrollbarApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      theme: CupertinoThemeData(brightness: .light),
      home: ScrollbarExample(),
    );
  }
}

class ScrollbarExample extends StatefulWidget {
  const ScrollbarExample({super.key});

  @override
  State<ScrollbarExample> createState() => _ScrollbarExampleState();
}

class _ScrollbarExampleState extends State<ScrollbarExample> {
  final ScrollController _controllerOne = ScrollController();

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('CupertinoScrollbar Sample'),
      ),
      child: CupertinoScrollbar(
        thickness: 6.0,
        thicknessWhileDragging: 10.0,
        radius: const .circular(34.0),
        radiusWhileDragging: Radius.zero,
        controller: _controllerOne,
        thumbVisibility: true,
        child: ListView.builder(
          controller: _controllerOne,
          itemCount: 120,
          itemBuilder: (BuildContext context, int index) {
            return Center(
              child: Padding(
                padding: const .all(8.0),
                child: Text('Item $index'),
              ),
            );
          },
        ),
      ),
    );
  }
}