Flutter remove the space TabBar and SliverAppBar

Question

I want to implement a float AppBar with a pinned TabBar at the bottom. The following is the test code (dartPad):

Widget build(BuildContext context) {
return Scaffold(
  body: NestedScrollView(
    floatHeaderSlivers: true,
    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
      return <Widget>[
        SliverAppBar(
          backgroundColor: Colors.yellow,
          title: Text(
            "WhatsApp type sliver appbar",
          ),
          centerTitle: true,
          pinned: true,
          floating: true,
          bottom: PreferredSize(
            preferredSize: Size.fromHeight(kToolbarHeight),
            child: Container(
              color: Colors.orange,
              alignment: Alignment.topLeft,
              child: TabBar(
                  isScrollable: true,
                  indicatorColor: Colors.white,
                  indicatorSize: TabBarIndicatorSize.label,
                  controller: _tabController,
                  labelPadding: EdgeInsets.only(
                      top: 13, bottom: 13, left: 16, right: 16),
                  tabs: [
                    Text(
                      "TAB A",
                    ),
                    Text(
                      "TAB B",
                    ),
                  ]),
            ),
          ),
        ),
      ];
    },
    body: TabBarView(
      controller: _tabController,
      children: [
        TabA(),
        const Center(
          child: Text('Display Tab 2',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
        ),
      ],
    ),
  ),
);

}

I find that it will have a top-padding on the TabBar when scrolling down. Is there any way to remove that space? I have set the SliverAppBar's toolbarheight, but that space will keep there even I lower the height.

scroll up (show appbar):

scroll down (hide appbar, the top yellow is not hidden):

@AntoninGAVREL sorry, i dont see there is a isDense param in the SliverAppBar — CbL, Feb 11 '21 at 06:21
@AntoninGAVREL isDense property is only inside DropDownButton or InputDecoration — Kab Agouda, Feb 11 '21 at 06:29
Try this example : https://dartpad.dev/0955dcf876ba24619b86d49ec50788cc? — Kab Agouda, Feb 11 '21 at 06:34
thank you,@KabirouAgouda. my test code is basically from that, but i need to build the tabbar with custom height. And funny thing is that event i use the same height as appbar, that top-padding is still there — CbL, Feb 11 '21 at 07:51

Antonin GAVREL · Answer 1 · 2021-02-11T06:47:10.823

1

Just set property pinned: false

See documentation

pinned → bool Whether the app bar should remain visible at the start of the scroll view. [...] final

Also remove tabBar from bottom: and add it above tabbarview inside a column

edited Feb 11 '21 at 06:47

answered Feb 11 '21 at 06:33

Antonin GAVREL

9,682
8
54
81

score 1 · Answer 2 · answered Feb 11 '21 at 10:29

Thank you for the help.

Finally, I have another solution that may also take consider. I post here for others to ref.

Widget build(BuildContext context) {
return Scaffold(
  body: NestedScrollView(
    floatHeaderSlivers: true,
    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
      return <Widget>[
        SliverAppBar(
          backgroundColor: Colors.yellow,
          title: Text(
            "WhatsApp type sliver appbar",
          ),
          elevation: 0.0,
          forceElevated: false,
          pinned: false,
          floating: true,
          primary: false,
          centerTitle: false,
          titleSpacing: NavigationToolbar.kMiddleSpacing,
          automaticallyImplyLeading: false,
        ),
        SliverAppBar(
          backgroundColor: Colors.orange,
          pinned: true,
          primary: false,
          centerTitle: false,
          titleSpacing: 0,
          toolbarHeight: 48,
          automaticallyImplyLeading: false,
          forceElevated: true,
          title: Align(
            alignment: Alignment.topLeft,
            child: TabBar(
                isScrollable: true,
                indicatorColor: Colors.white,
                indicatorSize: TabBarIndicatorSize.label,
                controller: _tabController,
                labelPadding: EdgeInsets.only(
                    top: 13, bottom: 13, left: 16, right: 16),
                tabs: [
                  Text(
                    "TAB A",
                  ),
                  Text(
                    "TAB B",
                  ),
                ]),
          ),
        ),
      ];
    },
    body: TabBarView(
      controller: _tabController,
      children: [
        TabA(),
        const Center(
          child: Text('Display Tab 2',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
        ),
      ],
    ),
  ),
);
}

Basically, what i do is separate 2 SliverAppBar, one is not pinned and floating; another is pinned. This makes the upper appbar disappear when scroll down and display when scroll up while the tabbar will keep pinning there.

score 1 · Answer 3 · answered Nov 23 '22 at 13:54

1

İf you use listview add this line

ListView.builder(
            padding: EdgeInsets.zero,

answered Nov 23 '22 at 13:54

artemitSoft

286
5
17

Flutter remove the space TabBar and SliverAppBar

3 Answers3