How to hide app bar while scrolling up but shows up when scrolling down?

Question

I'm trying to achieve the behavior as we see in android WhatsApp and advised tab behavior in material design, check suggestion here and the video here. When i scroll down, I want the tab bar to be visible but the app bar to hide, this behaviour can be seen on the medium android app as well.

I saw there was an earlier answer here, but it did not work for me.

I've tried several approaches but the nested scroll view doesn't work for me.

 return DefaultTabController(
  length: 2,
  child:Scaffold(
    body: NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
         SliverAppBar(
            title: Text("Application"),
            floating: true,
            pinned: true,
            snap: true,
            bottom: TabBar(
              tabs: <Tab>[
               Tab(text: "T"),
               Tab(text: "B"),
              ], // <-- total of 2 tabs
            ),
          ),
        ];
      },
      body: TabBarView(
        children: <Widget>[
         RandomWords(),
         RandomWords(),
        ], 
      ),
    ),
  ),
);

and tried this as well,

Scaffold(
   body: NestedScrollView(
     controller: _scrollViewController,
     headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
       return <Widget>[
         SliverAppBar(
           title: Text("N"),
           pinned: true,
           floating: true,
           forceElevated: innerBoxIsScrolled,
           //snap: true,
           bottom: TabBar(
             tabs: <Tab>[
              Tab(text: "T"),
              Tab(text: "B"),
             ],
             controller: _tabController,
           ),
         )
       ];
     },
     body: TabBarView(
       children: <Widget>[
         RandomWords(),
         RandomWords(),
       ],
       controller: _tabController,
     ),
   ),
 ),
);

My code is available here.

Is there any reason the NestedScrollView might not work?

could you add your code which you tried? – Jitesh Mohite Jul 14 '20 at 11:13 — Jitesh Mohite, Jul 14 '20 at 11:13

score 1 · Answer 1 · answered Jul 14 '20 at 11:17

1

You can use SliverList and SliverAppBar

answered Jul 14 '20 at 11:17

Gioele Pannetto

328
3
12

1

try to set floating: false, pinned: false, snap: false – Gioele Pannetto Jul 14 '20 at 11:27
What's happening? Can you link a video? – Gioele Pannetto Jul 14 '20 at 11:30
@GenchiGenbutsu There seems to be an issue with my widget that i'm loading in the tab. – paws Jul 14 '20 at 11:52

Jitesh Mohite · Answer 2 · 2020-07-14T11:40:00.147

Try This

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: new Scaffold(
        body: new NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              new SliverAppBar(
                title: Text("Application"),
                floating: true,
                pinned: true,
                snap: true,
                bottom: new TabBar(
                  tabs: <Tab>[
                    new Tab(text: "T"),
                    new Tab(text: "B"),
                  ], // <-- total of 2 tabs
                ),
              ),
            ];
          },
          body: new TabBarView(
            children: <Widget>[
              Center(
                  child: Text(
                'T Tab',
                style: TextStyle(fontSize: 30),
              )),
              Center(
                  child: Text(
                'B Tab',
                style: TextStyle(fontSize: 30),
              )),
            ],
          ),
        ),
      ),
    );
  }
}

Output:

So while this itself works simply with the text in the tabs, when i try load my own widget it doesnt work with the scroll anymore — paws, Jul 14 '20 at 11:47
The basic behavior is widgets shows a list to load a json file and when someone clicks on an entry in the list, I navigate them to a new page. — paws, Jul 14 '20 at 11:50

How to hide app bar while scrolling up but shows up when scrolling down?

2 Answers2