CupertinoScrollbar Widget – Flutter Widget Guide By Flutter Agency

· 4 min read
CupertinoScrollbar Widget - Flutter Widget Guide By Flutter Agency
CupertinoScrollbar Widget - Flutter Widget Guide By Flutter Agency

In this Cupertino Widget Series we have already discussed various CupertinoActivityIndicator Widget,CupertinoPicker Widget,CupertinoPageTransition Widget So now it’s time to discuss CupertinoScrollbar Widget in detail.

What is CupertinoScrollbar Widget in Flutter?

CupertinoScrollbar Widget is an iOS-style Scrollbar. A Scrollbar is basically used to scroll data in mobile screen and it indicates which portion of a Scrollable Widget is actually visible.

By Default, the CupertinoScrollbar Widget will remain draggable and it also uses PrimaryScrollController.

The Default Constructor of CupertinoScrollbar Widget will look like below:

CupertinoScrollBar({
  Key key,
  ScrollController controller,
  bool isAlwaysShown: false,
  @required Widget child,
});

In Above Constructor all fields marked with @required must not be empty.

Properties:

  • Key key: The widget key, used to control if it’s should be replaced.
  • Widget Child: 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.
  • ScrollController controller: The ScrollController used to implement Scrollbar dragging. If a ScrollController is passed, then scrollbar dragging will be enabled on the given ScrollController. A stateful ancestor of this CupertinoScrollbar needs to manage the ScrollController and either pass it to a scrollable descendant or use a PrimaryScrollController to share it.
  • bool isAlwaysShown: It has a bool data type and it indicates whether the Scrollbar should always be visible. When false, the scrollbar will be shown during scrolling and will fade out otherwise. When true, the scrollbar will always be visible and never fade out. The controller property must be set in this case. It should be passed the relevant Scrollable’s ScrollController.

How to use CupertinoScrollbar Widget in Flutter?

The following code snippet tells us how to implement CupertinoScrollbar Widget in Flutter.

Stack(children: [
      Positioned(
        top: 180,
        left: 0,
        right: 0,
        bottom: 0,
        child: Container(
          color: Colors.orangeAccent,
          child: CupertinoScrollbar(
            child: SingleChildScrollView(
              child: Column(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      height: 500.0,
                      child: Text(
                        'This is Test demo',
                        style: Theme.of(context).textTheme.caption.copyWith(
                              fontSize: 25,
                              color: Colors.white,
                              fontWeight: FontWeight.w700,
                            ),
                      ),
                    ),
                  ]),
            ),
          ),
        ),
      ),
    ]);

The above code will give us output like below:

CupertinoScrollbar Widget - Flutter Widget Guide By Flutter Agency

CupertinoScrollbar

Conclusion:

In this article, we have been through What is CupertinoScrollbar Widget in Flutter along with how to implement it in a Flutter.

Thanks for reading!!!
Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply