Custom Scrollbar

Lao Meng's guide: [Flutter Actual] Series article address: http://laomengit.com/guide/introduction/mobile_system.html

By default, Flutter's scroll components, such as ListView, do not display scrollbars. Scrollbar s are used to display scrollbars:

Scrollbar(
  child: ListView.builder(
    reverse: false,
    itemBuilder: (BuildContext context, int index) {
      return Card(
        child: Container(
          height: 45,
          alignment: Alignment.center,
          child: Text('$index'),
        ),
      );
    },
    itemCount: 30,
    itemExtent: 50,
  ),
)

While sliding, scrollbars are displayed on the right side, but Scrollbar cannot implement custom scrollbar styles, such as the following.

A scrollbar component needs to be customized.

To implement a custom scrollbar component, you first need to listen for scrolling positions of the scrollbar component, and use NotificationListener to listen for scrolling positions:

bool _handleScrollNotification(ScrollNotification notification) {
    final ScrollMetrics metrics = notification.metrics;
    print('Maximum scrolling distance for scrolling component:${metrics.maxScrollExtent}');
    print('Current Scroll Position:${metrics.pixels}');
    return true;
  }

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollNotification>(
      onNotification: _handleScrollNotification,
      child: ListView.builder(
        reverse: false,
        itemBuilder: (BuildContext context, int index) {
          return Card(
            child: Container(
              height: 45,
              alignment: Alignment.center,
              child: Text('$index'),
            ),
          );
        },
        itemCount: 30,
        itemExtent: 50,
      ),
    );
  }

Get the maximum scrolling distance and current scrolling position of the current scrolling component through ScrollNotification, whereMetrics.maxScrollExtentRepresents the maximum scrolling distance of the current scrolling component.Metrics.pixelsRepresents the current scrolling position.

Use these two values to calculate the position of the scrollbar on the current screen, and use the Stack component to overlay the ListView with a custom scrollbar:

NotificationListener<ScrollNotification>(
  onNotification: _handleScrollNotification,
  child: Stack(
    alignment: Alignment.topRight,
    children: <Widget>[
      ListView.builder(
        reverse: false,
        itemBuilder: (BuildContext context, int index) {
          return Card(
            child: Container(
              height: 45,
              alignment: Alignment.center,
              child: Text('$index'),
            ),
          );
        },
        itemCount: 30,
        itemExtent: 50,
      ),
      //scroll bar
      Container(
        height: 100,
        width: 20,
        color: Colors.red,
      )
    ],
  ),
)

Link this scrollbar with the scroll event that NotificationListener listens for, and control the position of the scrollbar through the alignment property of Container:

Container(
  alignment: Alignment(1, _alignmentY),
  padding: EdgeInsets.only(right: 5),
  child: Container(
    height: 100,
    width: 20,
    color: Colors.red,
  ),
)

_alignmentY is the calculated offset location, calculated as follows:

_alignmentY = -1 + (metrics.pixels / metrics.maxScrollExtent) * 2;

Notice here that the alignment coordinate system:

The end result:

Then simply modify the style of the scrollbar:

class _ScrollBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 18,
      height: 60,
      decoration: BoxDecoration(
          shape: BoxShape.rectangle,
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: Colors.blue),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(
            Icons.arrow_drop_up,
            size: 18,
          ),
          Icon(
            Icons.arrow_drop_down,
            size: 18,
          ),
        ],
      ),
    );
  }
}

Finally, by encapsulating the code, you can add custom scrollbars to all the scrolling components, not just ListView.

Communication

Lao Meng Flutter blog address (330 control usages): http://laomengit.com

Welcome to the Flutter Exchange Group (WeChat: laomengit), Focus on Public Number (Lao Meng Flutter):

Tags: Mobile

Posted on Sun, 28 Jun 2020 18:52:48 -0400 by adguru