Sliverappbar is overlapped by the content in the body (Flutter)

Question

I am using sliver app bar for some better ui, I wanted to keep tabs inside the app bar which has to be pinned. Only the tabs has to be pinned while the app bar with title should expand only dragged to top. When I kept pinned to true, tabs are overlapping the content in the body which I did not want.

  return Scaffold(
      body: SafeArea(
        child: DefaultTabController(
          length: 5,
          child: NestedScrollView(
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                SliverAppBar(

                  backgroundColor: Colors.white,
                  floating: false,
                  flexibleSpace: FlexibleSpaceBar(
                    title: Text(
                      "Home Page",
                      style: TextStyle(
                        color: Colors.teal,
                      ),
                    ),
                  ),
                  actions: [
                    IconButton(
                      icon: Icon(
                        Icons.message,
                        color: Colors.grey[700],
                      ),
                      onPressed: () {},
                    ),
                    SizedBox(width: 5)

                  ],

                ),
                SliverPersistentHeader(
                  pinned: true,
                  delegate: _SliverAppBarDelegate(
                    TabBar(
                      labelColor: Colors.teal,
                      unselectedLabelColor: Colors.grey[600],
                      tabs: [
                        Tab(icon: Icon(Icons.home)),
                        Tab(icon: Icon(Icons.people_outline)),
                        Tab(icon: Icon(Icons.account_balance)),
                        Tab(icon: Icon(Icons.notifications_active)),
                        Tab(icon: Icon(Icons.menu)),
                      ],
                    ),
                  ),
                ),
              ];
            },
            body: ListView(
              children: [
                Column(
                  children: [
                    Padding(
                      padding: const EdgeInsets.symmetric(vertical: 10.0),
                      child: Row(
                        children: [
                          SizedBox(width: 10),
                          Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 6.0),
                            child: CircleAvatar(
                              radius: width(context) * 0.08,
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 4.0),
                            child: Container(
                              width: width(context) * 0.74,
                              height: width(context) * 0.15,
                              decoration: BoxDecoration(
                                  border: Border.all(color: Colors.grey[800]),
                                  borderRadius: BorderRadius.circular(100)),
                              child: Column([![enter image description here][1]][1]
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Wrap(
                                    children: [
                                      Text('To ask a question \n type here...', style: TextStyle(fontSize: 22),),
                                    ],
                                  ),

                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Row(
                      children: [
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Container(
                            height: height(context)*0.07,
                            width: width(context)*0.70,
                            decoration: BoxDecoration(
                                border: Border.all(color: Colors.grey[800]),
                                borderRadius: BorderRadius.circular(10)),
                          ),
                        ),
                        Container(
                          height: height(context)*0.07,
                          width: width(context)*0.25,
                          decoration: BoxDecoration(
                              border: Border.all(color: Colors.grey[800]),
                              borderRadius: BorderRadius.circular(10)),
                        ),
                      ],
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 8.0, left: 8, right: 8),
                      child: Divider(
                        color: Colors.grey[600],
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 8.0, left: 8, right: 8),
                      child: Card(
                        child: Container(
                          height: 200,
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 8.0, left: 8, right: 8),
                      child: Card(
                        child: Container(
                          height: 200,
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 8.0, left: 8, right: 8),
                      child: Card(
                        child: Container(
                          height: 200,
                        ),
                      ),
                    ), Padding(
                      padding: const EdgeInsets.only(top: 8.0, left: 8, right: 8),
                      child: Card(
                        child: Container(
                          height: 200,
                        ),
                      ),
                    ),


                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

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;
  }
}

Answer 1

You need to change 'build' method in '_SliverAppBarDelegate' like below.

Please try giving a background color at 'Container'.

return new Container(
      color: Colors.white, // Here
      child: _tabBar,
    );

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(
      color: Colors.white,
      child: _tabBar,
    );
  }

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