Inscription – sword tianya, start from your drip accumulation, and will keep improving.

Flutter is Google’s latest mobile development framework. The Flutter NestedScrollView sliding component is used to handle complex sliding scenarios. For example, when the Flutter view is sliding upwards, part of the content needs to be folded and hidden. The combination of NestedScrollView and SliverAppBar is used.

In this section, NestedScrollView is used to combine SliverAppBar with TabBar and TabBarView to achieve the folding header effect

[X1] The daily reminder of wechat official account is accumulated at any time

【 X2 】 Various series of free open source video tutorials focus on you won’t get lost

【 X3 】 series article millions of Demo copy and paste use at any time

[x4] The corresponding explanation video of this article is here

【x5】 The entire code of this article is here

The final result of this Demo is as follows:

The body of the first page is using a Scaffold Scaffold to build, because use the TabBar and TabBarView, about label switching is a animation effects, so here are also used by SingleTickerProviderStateMixin, code is as follows:

class NetScrollHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState(a) {
    returnScrollHomePageState(); }}class ScrollHomePageState extends State with SingleTickerProviderStateMixin {



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(title: Text("Preparation"),),
      /// handle sliding
      body: buildNestedScrollView(),
    );
  }

Copy the code

The buildNestedScrollView method builds a sliding layout NestedScrollView with two parts, the head using SliverAppBar to trigger the collapse and the body to configure the body of the page, as follows:

 /// build a sliding layout
 /// As shown in Figure 1-1
 NestedScrollView buildNestedScrollView(a) {
   return NestedScrollView(
     headerSliverBuilder: (BuildContext context, bool b) {
       return [
         SliverAppBar(
           ///true SliverAppBar does not slide
           pinned: true./// whether to hide the title with sliding
           floating: true./// The height of the SliverAppBar expansion
           expandedHeight: 200,
           flexibleSpace: buildFlexibleSpaceBar(),
           bottom: buildTabBar(),
         ),
       ];
     },
     /// The body part
     body: buildTabBarView(),
   );
 }

Copy the code

The body corresponds to the body of the page. TabBarView is used to load three widgets, but you can also use a separate StatefulWidget in a real application scenario as follows:

TabBarView buildTabBarView(a) {
   return TabBarView(
     controller: tabController,
     children: <Widget>[
       SingleChildScrollView(
         child: Container(
           alignment: Alignment.bottomLeft,
           child: Text("This is the first page."),
           height: 1000,
         ),
       ),
       Text(
         "This is the second page.",
         style: TextStyle(color: Colors.blue),
       ),
       Text(
         "This is the third page.",
         style: TextStyle(color: Colors.red),
       ),
     ],
   );
 }

Copy the code

Of course, there is a TabController used here, which is created in the initState initialization function as follows:

TabController tabController;

@override
void initState(a) {
  super.initState();
  /// 3 means there are three sub-items
  /// apply to the TabBarView, corresponding to three of the subitems
  /// apply to TabBar, corresponding to 32 subitems
  tabController = new TabController(length: 3, vsync: this);
}

Copy the code

The TabController is bound to the TabBarView/TabBar linkage, which is configured in the Bottom property of SliverAppBar, and is wrapped with buildTabBar.

TabBar buildTabBar(a) {
   return TabBar(
     controller: tabController,
     tabs: <Widget>[
       new Tab(
         text: "Tag 1",),new Tab(
         text: "Tag 2",),new Tab(
         text: "Tag 3",)]); }Copy the code

Finally, the picture part of folding and hiding part is configured in flexibleSpace property of SliverAppBar, which is of course using FlexibleSpaceBar. The code is as follows:

String imageUrl =
     "https://timgsa.baidu.com/timg?demo.image&quality=80&size=b9999_10000&sec=1578583093&di=0bf687d9589dc5c6c0778de9576ee077 &imgtype=jpg&er=1&src=http%3A%2F%2Ffile.mumayi.com%2Fforum%2F201403%2F28%2F111010vhgc45hkh41f1mfd.jpg";

 FlexibleSpaceBar buildFlexibleSpaceBar(a) {
   return FlexibleSpaceBar(
// title: Text("FlexibleSpaceBar title"),
     centerTitle: true,
     background: Container(
       color: Colors.blue[300],
       child: Column(
         mainAxisSize: MainAxisSize.min,
         children: <Widget>[
           Container(
             height: 150,
             child: Image.network(
               imageUrl,
               fit: BoxFit.fill,
               height: 160,
               width: 400,),),),),),); }Copy the code

The completion of

Of course, with the character of small series, it is necessary to have the source code: the entire code of this article is here