This is the 8th day of my participation in the More text Challenge. For details, see more text Challenge

In this article, we use ListView to combine several GridViews together to achieve the adhesion of different sliding components, but we must set the GridView sliding to prevent the conflict of multiple sliding components. This is not a convenient way to write, but the fact that Flutter provides a CustomScrollView to glue multiple slide components together allows for a more interesting slide effect.

CustomScrollView profile

The common properties of the CustomScrollView are as follows:

  • slivers: the most important property, an array of SliverXX components, including such asSliverList(corresponding to theListView),SliverGrid(corresponding to theGridView), etc., if normal components cannot be used directly and need to be usedSliverToBoxAdapterThe parcel.
  • Reverse: Indicates whether to scroll in the reverse direction. If true, scroll in the opposite direction.
  • ScrollDirection: scrollDirection. The value can be landscape or portrait.

Modify the original code

The page structure needs to be restructured from a GridView to a SliverGrid, and then the top area needs to be wrapped with a SliverToBoxAdapter. The title bar for each area also needs to be wrapped separately with a SliverToBoxAdapter. SliverToBoxAdapter is easy to use. You simply set the existing component to its child property.

Widget _headerGridButtons() {
  double height = 144;
  List<Map<String.String>> buttons = GridMockData.headerGrids();
  return SliverToBoxAdapter(
    child: Container(
      height: height,
      margin: EdgeInsets.fromLTRB(MARGIN, MARGIN, MARGIN, MARGIN / 2),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(4.0),
        gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color(0xFF56AF6D),
              Color(0xFF56AA6D),
            ]),
      ),
      child: Center(
        child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: buttons
                .map((item) => _getMenus(item['icon'], item['name'],
                    color: Colors.white))
                .toList()),
      ),
    ),
  );
}

Widget _getMenuTitle(String title) {
  return SliverToBoxAdapter(
    child: Container(
      margin: EdgeInsets.fromLTRB(MARGIN, MARGIN, MARGIN, MARGIN / 2),
      padding: EdgeInsets.all(MARGIN),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(4.0),
        color: Colors.white,
      ),
      child: Text(
        title,
        style: TextStyle(color: Colors.grey[700]),),),); }Copy the code

Instead of using the grid.count () method, we need to replace it with sliverGrid.count (). The parameters are basically the same, but we can remove the code that forbade sliding.count ().

// The following two lines of code are not required to prohibit SliverGrid
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
Copy the code

Make navigation more interesting

A SliverAppBar is provided in the Flutter exclusively for CustomScrollView. This navigation bar has the same basic properties as the AppBar, but has some other properties:

  • floating: Float, even if the scroll view is not at the top,SliverAppBarWill also follow the scrolling.
  • snap: When releasing the finger, it will decide whether to expand or fold it according to the current state. If it isfalse, the navigation bar stays at the last slide position.
  • pinned: Whether the navigation bar is visible after scrolling to the top. The default isfalse. iffalse, the navigation bar will disappear after you scroll out of the top.
  • expandedHeight: The height of the navigation bar after it is expanded.
  • flexibleSpace: Expand the elastic space, that is, when the navigation bar is rolled up or expanded, the background picture and the navigation bar text can be displayed. When the navigation bar is slid to the top, only the text navigation bar will be displayed. When the navigation bar is slid down, the background content will be gradually displayed, so as to achieve the effect of dynamic navigation bar.
SliverAppBar _getAppBar(String title) {
  return SliverAppBar(
    pinned: true,
    expandedHeight: 200,
    brightness: Brightness.dark,
    flexibleSpace: FlexibleSpaceBar(
      title: Text(title),
      background: Image.network(
        'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=688497718, & FM = 26 & gp = 0. 308119011 JPG',
        fit: BoxFit.cover,
      ),
    ),
  );
}
Copy the code

The modified code

After the modification, a Container is used to set the background color, and multiple SliverXX components can be arranged in order to complete the splicing and scroll together, which is much easier and more effective than using the ListView.

@override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: CustomScrollView(
        slivers: [
          _getAppBar('Personal center'),
          _headerGridButtons(),
          _getMenuTitle('Financial Planning'),
          _gridButtons(GridMockData.financeGrids()),
          _getMenuTitle('Life Services'),
          _gridButtons(GridMockData.serviceGrids()),
          _getMenuTitle('Shopping consumption'),
          _gridButtons(GridMockData.thirdpartyGrids()),
        ],
      ),
    );
  }
Copy the code

Other effects

In addition to the above effects, Flutter provides a SliverPersistentHeader hover header component for displaying hover headers. Refer to the corresponding documentation, which is useful if you need to show the switch bar at the top or the table header.

conclusion

This article introduces the basic use of CustomScrollView and the use of the SliverAppBar to make navigation navigation more interesting. In actual development, it is recommended that you use CustomScrollView first when you have multiple sliding component combinations.