SliverAppBar – SliverList is Scrolling all the way to the top

Issue

I am currently working with SliverAppBar and i am facing problem while Scrolling the sliverList.

In the Picture above, my TabBar is going all the way up to the notification bar. When sliverAppBar collapse, I want my Tabbar to stick to the bottom of the AppBar.

Here is my Code that i am trying…

    return Scaffold(
  body: CustomScrollView(

    slivers: <Widget>[
      SliverAppBar(
        //backgroundColor: Colors.transparent,
        actions: <Widget>[
          IconButton(icon: Icon(Icons.favorite), onPressed: () {}),
          IconButton(icon: Icon(Icons.share), onPressed: () {})
        ],
        floating: false,
        pinned: true,
        expandedHeight: getHeight(context),
        flexibleSpace: FlexibleSpaceBar(
          title: Text("text"),
          background: Container(
            height: double.infinity,
            width: double.infinity,
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage(currentImage),
                    fit: BoxFit.cover)),
          ),
        ),
      ),
      SliverList(
        delegate: SliverChildListDelegate(bottomListView),
      ),
    ],
  )
  ,
);

Solution

Just use bottom parameter of SliverAppBar and pass TabBar to it. In FlexibleSpaceBar add titlePadding to add padding from the TabBar. If you need to change TabBar colour, you can check this question.

Be careful with a title inside FlexibleSpaceBar and action icons in AppBar, because long title will cause overlapping in minimized appbar.

    child: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          //backgroundColor: Colors.transparent,
          actions: <Widget>[
            IconButton(icon: Icon(Icons.favorite), onPressed: () {}),
            IconButton(icon: Icon(Icons.share), onPressed: () {})
          ],
          floating: false,
          pinned: true,
          expandedHeight: getHeight(context),
          flexibleSpace: FlexibleSpaceBar(
            title: Text("text"),
            // Adding padding from TabBar
            titlePadding: EdgeInsets.only(bottom: 64, left: 60),
            background: Container(
              height: double.infinity,
              width: double.infinity,
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage(currentImage),
                      fit: BoxFit.cover)),
            ),
          ),
          // Adding TabBar to the bottom of SliverAppBar
          bottom: TabBar(
            tabs: [
              for (var i = 0; i < 3; i++)
                Tab(
                  text: 'test $i',
                ),
            ]
          ),
        ),
        SliverList(
          delegate: SliverChildListDelegate(bottomListView),
        ),
      ],
    ),

Answered By – Igor Kharakhordin

Answer Checked By – Gilberto Lyons (FlutterFixes Admin)