Flutter SliverAppBar with Tabs overlays content

Question

I have followed this tutorial (https://medium.com/@diegoveloper/flutter-collapsing-toolbar-sliver-app-bar-14b858e87abe) to create a CollapsingToolbar with a TabBar.

The problem is that when I scroll the content of the body overlays the tabBar.

Here is the code:

@override
Widget build(BuildContext context) {
return Scaffold(
  body: DefaultTabController(
    length: 2,
    child: NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            expandedHeight: 200.0,
            floating: false,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: Text("Collapsing Toolbar",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16.0,
                    )),
                background: Image.network(
                  "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                  fit: BoxFit.cover,
                )),
          ),
          SliverPersistentHeader(
            delegate: _SliverAppBarDelegate(
              TabBar(
                labelColor: Colors.black87,
                unselectedLabelColor: Colors.grey,
                tabs: [
                  Tab(icon: Icon(Icons.info), text: "Tab 1"),
                  Tab(icon: Icon(Icons.lightbulb_outline), text: "Tab 2"),
                ],
              ),
            ),
            pinned: true,
          ),
        ];
      },
      body: Text("Sample text"),
    ),
  ),
);

And the delegate:

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate(this._tabBar);

  final TabBar _tabBar;

  @override
  double get minExtent => _tabBar.preferredSize.height;
  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new Container(
      child: _tabBar,
    );
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return false;
  }
}

Any idea on this?

Answer 1

I spent couple of days figuring out what's the issue.turn out it can be fixed with extended_nested_scroll_view 1.0.1 as @niegus mentioned above though he is using old version so it did't work for me. But i have fixed with latest version
Here is a demo gif:
https://giphy.com/gifs/lMyFPbu74ycEaQFB1v

Step to achieve
1.Add plugin in pubspec.yaml

updated
extended_nested_scroll_view: ^3.0.0

2.Paste Code in main.dart

import 'dart:async';
import 'package:extended_nested_scroll_view/extended_nested_scroll_view.dart' as extend;
import 'package:flutter/material.dart';


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  var scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MatchFragment());
  }

}
class MatchFragment extends StatefulWidget {
  @override
  _MatchFragmentState createState() => _MatchFragmentState();
}

class _MatchFragmentState extends State<MatchFragment>  with TickerProviderStateMixin {
  TabController primaryTC;

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

  @override
  Widget build(BuildContext context) {
    final double statusBarHeight = MediaQuery.of(context).padding.top;
//var tabBarHeight = primaryTabBar.preferredSize.height;
    var pinnedHeaderHeight =
//statusBar height
    statusBarHeight +
        //pinned SliverAppBar height in header
        kToolbarHeight;
    return Scaffold(
        body: DefaultTabController(
          length: 2,
            child: extend.NestedScrollView(
                headerSliverBuilder: (c, f) {
                  return <Widget>[
                  SliverAppBar(
                  pinned: true,
                  expandedHeight: 200,
                  title: Text('Title'),
                  flexibleSpace: FlexibleSpaceBar(
                  background: Image.network(
                  "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                  fit: BoxFit.cover,
                  ))
                  ),

                  ];

                },
                pinnedHeaderSliverHeightBuilder: () {
                  return pinnedHeaderHeight;
                },
                body: Column(
                  children: <Widget>[
                    TabBar(
                      controller: primaryTC,
                      labelColor: Colors.black87,
                      unselectedLabelColor: Colors.grey,
                      tabs: [
                        Tab(text: "Tab1"),
                        Tab(text: "Tab2"),
                      ],
                    ),
                    Expanded(
                      child: TabBarView(
                        controller: primaryTC,
                        children: <Widget>[
                           Text('This is tab one'),
                           Text('This is tab one'),
                        ],
                      ),
                    )
                  ],
                )

            ),
        )
    );


}

}