flutter, SliverPersistentHeader suction anchor effect achieved at the top Tab

Directly on the code it

import 'package:flutter/material.dart';

class StickyDemo extends StatefulWidget {
 
  @override
  _StickyDemoState createState() => _StickyDemoState();
}

class _StickyDemoState extends State<StickyDemo>
    with SingleTickerProviderStateMixin {
  TabController tabController;

  @override
  void initState() {
    super.initState();
    this.tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            elevation: 0,
            expandedHeight: 250,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Sliver-sticky效果'),
              background: Image.network(
                'http://img1.mukewang.com/5c18cf540001ac8206000338.jpg',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverPersistentHeader(
            pinned: true,
            delegate: StickyTabBarDelegate(
              child: TabBar(
                labelColor: Colors.black,
                controller: this.tabController,
                tabs: <Widget>[
                  Tab(text: 'Home'),
                  Tab(text: 'Profile'),
                ],
              ),
            ),
          ),
          SliverFillRemaining(
            child: TabBarView(
              controller: this.tabController,
              children: <Widget>[
                Center(child: Text('Content of Home')),
                Center(child: Text('Content of Profile')),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class StickyTabBarDelegate extends SliverPersistentHeaderDelegate {
  final TabBar child;

  StickyTabBarDelegate({@required this.child});

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return this.child;
  }

  @override
  double get maxExtent => this.child.preferredSize.height;

  @override
  double get minExtent => this.child.preferredSize.height;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}

　　

FIG slide down effect:

The last tab on the top of the adsorption fixed; go down the slide, the picture will appear at the top of the;

A more detailed look at the original blog  https://segmentfault.com/a/1190000019902201

This is a way to achieve, of course, there are other ways, the three of them can achieve NestedScrollViewRefreshIndicator, NestedScrollView and SliverPersistentHeader, the following code is the project's code, write down a simple structure, which is useful to a Bloc mode, but nothing to achieve results and Kazakhstan

NestedScrollViewRefreshIndicator(
        onRefresh: onRefresh,
        child: NestedScrollView(
          headerSliverBuilder: (c, f) {
            return buildSliverHeader(_appBarHeight, applicationBloc);
          },
          body: Column(
            children: <Widget>[
              primaryTabBar,
              Expanded(
                child: TabBarView(
              　　controller: this.tabController,
              　　children: <Widget>[
                　　Center(child: Text('Content of Home')),
                　　Center(child: Text('Content of Profile')),
              　　],
            　　),
              ),
            ],
          ),
        ),
      ),

var primaryTabBar = Container(
      height: 36,
      child: TabBar(
              labelColor: Colors.black,
              controller: this.tabController,
              tabs: <Widget>[
                 Tab(text: 'Home'),
               　Tab(text: 'Profile'),
                ],
              ),
    );

 List<Widget> buildSliverHeader(appBarHeight, applicationBloc) {
    var widgets = <Widget>[];
    widgets.add(
      SliverPersistentHeader(
        pinned: false,
        delegate: _SliverAppBarDelegate(
            Column(),
            appBarHeight),
      ),
    );
    return widgets;
  }