SliverAppBar - SliverList is Scrolling all the way to the top

Question

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),
      ),
    ],
  )
  ,
);

Do you want TabBar to always be under the appbar? – Igor Kharakhordin Nov 20 '19 at 14:21 — Igor Kharakhordin, Nov 20 '19 at 14:21
@IgorKharakhordin Yes... – black-hacker Nov 20 '19 at 14:43 — black-hacker, Nov 20 '19 at 14:43

score 1 · Accepted Answer · answered Nov 20 '19 at 15:32

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),
        ),
      ],
    ),

I wrapped TabBarVIew with Container and gave it white color. So, i dont have to change the primary color of whole app. It's an alternate way... But, it works thanks... — black-hacker, Nov 21 '19 at 09:55

score 0 · Answer 2 · answered Nov 20 '19 at 12:45

0

its maybe a bug：

https://github.com/flutter/flutter/issues/22393

so you can use this package,it solved this problem.

answered Nov 20 '19 at 12:45

Lucky Dog

608
5
15

SliverAppBar - SliverList is Scrolling all the way to the top

2 Answers2