Flutter customscrollview control

Time:2021-4-17

Flutter customscrollview control

Lao Meng‘s Guide: Happy 51 holiday is over, switch to effort mode. Today, I’d like to share with you the customscrollview component, which will be often used in future projects. Customscrollview is like an adhesive, which can glue multiple components together with a unified rolling effect.

CustomScrollView

Customscrollview is a scrolling component that uses the slider component to create a custom scrolling effect. Usage scenarios:

  1. Listview and GridView nest scenes with each other. When listview nest GridView, we need to specify the height of GridView, but we want the height to change with the content (not specified). Listview and GridView use the same scrolling effect.
  2. At the top of a page is AppBar, then GridView, and finally listview. These three areas scroll as a whole. AppBar has a ceiling effect.

Customscrollview is like an adhesive, which can glue multiple components together to achieve a uniform rolling effect.

There are many sliver series components, such as sliver list, sliver grid, sliver fixedextendlist, sliver padding, sliver AppBar, etc.

Nested scenes

Such a layout is often seen in actual business scenarios. The top is GridView, followed by listview. When scrolling, it is a whole. This scenario can not be realized by GridView + listview, but by customscrollview + slicergrid + slicerlist. The implementation code is as follows:

CustomScrollView(
  slivers: <Widget>[
    SliverGrid.count(crossAxisCount: 4,children: List.generate(8, (index){
      return Container(
        color: Colors.primaries[index%Colors.primaries.length],
        alignment: Alignment.center,
        child: Text('$index',style: TextStyle(color: Colors.white,fontSize: 20),),
      );
    }).toList(),),
    SliverList(
      delegate: SliverChildBuilderDelegate((content, index) {
        return Container(
          height: 85,
          alignment: Alignment.center,
          color: Colors.primaries[index % Colors.primaries.length],
          child: Text('$index',style: TextStyle(color: Colors.white,fontSize: 20),),
        );
      }, childCount: 25),
    )
  ],
)

The results are as follows

Flutter customscrollview control

At the top is the AppBar scene

In the actual project, the top of the page is AppBar, then GridView, and finally listview. These three areas scroll as a whole. AppBar has a ceiling effect, which we often encounter. The usage is as follows:

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      pinned: true,
      expandedHeight: 230.0,
      flexibleSpace: FlexibleSpaceBar(
        Title: Text,
        background: Image.network(
          'http://img.haote.com/upload/20180918/2018091815372344164.jpg',
          fit: BoxFit.fitHeight,
        ),
      ),
    ),
    SliverGrid.count(crossAxisCount: 4,children: List.generate(8, (index){
      return Container(
        color: Colors.primaries[index%Colors.primaries.length],
        alignment: Alignment.center,
        child: Text('$index',style: TextStyle(color: Colors.white,fontSize: 20),),
      );
    }).toList(),),
    SliverList(
      delegate: SliverChildBuilderDelegate((content, index) {
        return Container(
          height: 85,
          alignment: Alignment.center,
          color: Colors.primaries[index % Colors.primaries.length],
          child: Text('$index',style: TextStyle(color: Colors.white,fontSize: 20),),
        );
      }, childCount: 25),
    )
  ],
)

The results are as follows

Flutter customscrollview control

adoptscrollDirectionandreverseParameter to control the rolling direction

CustomScrollView(
  scrollDirection: Axis.horizontal,
  reverse: true,
  ...
)

scrollDirectionRolling direction, divided into vertical and horizontal direction.

reverseThe parameter indicates that the scrolling direction is reversed. It does not change from vertical to horizontal, but scrolls down by default when scrolling in the vertical direction,reverseIf false is set, the scrolling direction changes to up, and the horizontal scrolling direction changes to left.

primaryCannot be set when set to truecontrollerBecauseprimaryWhen true,controllerThe advantage of using primaryscrollcontroller is that the parent component can control the scrolling behavior of the scrollable components in the subtree. For example, scaffold uses this mechanism to realize the function of clicking the navigation bar to return to the top in IOS.

controllerAs a rolling controller, it can monitor the rolling position and set the rolling position

_scrollController = ScrollController();

//Monitor scroll position
    _scrollController.addListener((){
      print('${_scrollController.position}');
    });
    //Scroll to the specified position
    _scrollController.animateTo(20.0);

CustomScrollView(
    controller: _scrollController,
    ...
)

physicsRepresents the physical scrolling characteristics of scrollable components. Please refer toScrollPhysics

communication

Old Meng flutter blog address (nearly 200 controls usage)http://laomengit.com

Welcome to Flutter exchange group (WeChat: laomengit) and official account [Lao Meng Flutter]:

Flutter customscrollview control Flutter customscrollview control