CODEWITHSUNDEEP
flutterflutter-sliverappbar
CbL
CbL

Reputation: 824

Flutter remove the space TabBar and SliverAppBar

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): enter image description here

scroll down (hide appbar, the top yellow is not hidden): enter image description here

Upvotes: 3

Views: 3149

Answers (3)

artemitSoft
artemitSoft

Reputation: 302

İf you use listview add this line

ListView.builder(
            padding: EdgeInsets.zero,

Upvotes: 2

CbL
CbL

Reputation: 824

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.

Upvotes: 2

Antonin GAVREL
Antonin GAVREL

Reputation: 11239

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

Upvotes: 1

Related Questions