title: Flutter TabBar and SliverAppBar that hides when you scroll down
body: <p>I am trying to create an app with a top application bar and a tab bar below. When you scroll down, the bar should hide by moving off the screen (but tabs should stay), and when you scroll back up, the application bar should show again. This behaviour can be seen in WhatsApp. Please see <a href="https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1cx_CQC_pYOeAxmJAoEIjGnZNAWQzz-O1%2Ftabs-scrolling-1.mp4" rel="noreferrer">this</a> video for a demonstration. (Taken from <a href="https://material.io/design/components/tabs.html#behavior" rel="noreferrer">Material.io</a>). <a href="https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1s7cWxE-2f_70t7xemGBk9G6Uav7Z7c9C%2Ftabs-scrolling-2.mp4" rel="noreferrer">This</a> is a similar behaviour, although the app bar and tab bar are hidden on scroll, so it is not exactly the behaviour I am looking for.</p>
  <p>I have been able to achieve the autohiding, however, there are a few issues:</p>
  <ol>
  <li><p>I have to set the <code>snap</code> of the <code>SliverAppBar</code> to <code>true</code>. Without this, the application bar will not show when I scroll back up.</p>
  <p>Although this is works, it is not the behaviour I am looking for. I want the application bar to show smoothly (similar to WhatsApp) rather than coming into view even if you scroll very little.</p>
  <p>To clarify, when I scroll all the way down, even if I scroll up very little, the app bar should come into view. I do not want to have to scroll all the way up to see the app bar.</p>
  </li>
  <li><p>When I scroll down and change tabs, a little bit of the content is cut out of view.</p>
  <p>Below is a GIF showing the behaviour:</p>
  <p><a href="https://i.stack.imgur.com/ySuU1.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/ySuU1.gif" alt="GIF demonstrating output" /></a></p>
  <p>(See the part when I scroll down on the listView (tab1), then move back to tab2)</p>
  </li>
  </ol>
  <p>Here is the code for the <code>DefaultTabController</code>:</p>
  <pre><code>DefaultTabController(
    length: 2,
    child: new Scaffold(
      body: new NestedScrollView(
        headerSliverBuilder:
            (BuildContext context, bool innerBoxIsScrolled) {
          return &lt;Widget&gt;[
            new SliverAppBar(
              title: Text(&quot;Application&quot;),
              floating: true,
              pinned: true,
              snap: true,    // &lt;--- this is required if I want the application bar to show when I scroll up
              bottom: new TabBar(
                tabs: [ ... ],    // &lt;-- total of 2 tabs
              ),
            ),
          ];
        },
        body: new TabBarView(
          children: [ ... ]    // &lt;--- the array item is a ListView
        ),
      ),
    ),
  ),
  </code></pre>
  <p>In case it is needed, the full code is in this <a href="https://github.com/themindstorm/flutter-autohide-tabbar-problem" rel="noreferrer">GitHub repository</a>. <code>main.dart</code> is <a href="https://github.com/themindstorm/flutter-autohide-tabbar-problem/blob/master/lib/main.dart" rel="noreferrer">here</a>.</p>
  <p>I also found this related question: <a href="https://stackoverflow.com/questions/51948252/hide-appbar-on-scroll-flutter">Hide Appbar on Scroll Flutter?</a>. However, it did not provide the solution. The same problems persist, and when you scroll up, the <code>SliverAppBar</code> will not show. (So <code>snap: true</code> is required)</p>
  <p>I also found <a href="https://github.com/flutter/flutter/issues/17518" rel="noreferrer">this issue</a> on Flutter's GitHub. (<strong>Edit:</strong> someone commented that they are waiting for the Flutter team to fix this. Is there a possibility that there is no solution?)</p>
  <p>This is the output of <code>flutter doctor -v</code>: <a href="https://pastebin.com/a55hqLS1" rel="noreferrer">Pastebin</a>. Certain issues are found, but from what I have learned, they should not have an impact.</p>
  <p>Edit: There are two issues for this:</p>
  <ul>
  <li><a href="https://github.com/flutter/flutter/issues/29561" rel="noreferrer">https://github.com/flutter/flutter/issues/29561</a> (closed)</li>
  <li><a href="https://github.com/flutter/flutter/issues/17518" rel="noreferrer">https://github.com/flutter/flutter/issues/17518</a></li>
  </ul>