title: Instagram Profile Header Layout In Flutter
body: <p>I've been investigating SliverAppBar, CustomScrollView, NestedScrollView, SliverPersistentHeader, and more. I cannot find a way to build something like the Instagram user profile screen's header where only the tab bar is pinned. The main body of the screen is a TabBarView and each pane has a scrollable list.</p>
  
  <p>With SliverAppBar, it is easy to add the TabBar in the bottom parameter. But I want to have an extra widget of unknown/variable height above that TabBar. The extra widget should scroll out of the way when the page is scrolled and and then the TabBar is what is pinned at the top of the screen.</p>
  
  <p><a href="https://i.stack.imgur.com/b94cY.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/b94cY.gif" alt="enter image description here"></a></p>
  
  <p>All I could manage was a fixed content before the tab bar and a fixed tab bar. I cannot get the header to scroll up and stick the <code>TabBar</code> at the top just just below the <code>AppBar</code>.</p>
  
  <pre><code>import 'package:flutter/material.dart';
  
  void main() {
    runApp(MaterialApp(home: MyApp()));
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: Text("pabloaleko"),
          ),
          body: CustomScrollView(
            physics: const BouncingScrollPhysics(),
            slivers: &lt;Widget&gt;[
              SliverToBoxAdapter(
                child: SafeArea(
                  child: Text("an unknown\namount of content\n goes here in the header"),
                ),
              ),
              SliverToBoxAdapter(
                child: TabBar(
                  tabs: [
                    Tab(child: Text('Days', style: TextStyle(color: Colors.black))),
                    Tab(child: Text('Months', style: TextStyle(color: Colors.black))),
                  ],
                ),
              ),
              SliverFillRemaining(
                child: TabBarView(
                  children: [
                    ListView(
                      children: &lt;Widget&gt;[
                        ListTile(title: Text('Sunday 1')),
                        ListTile(title: Text('Monday 2')),
                        ListTile(title: Text('Tuesday 3')),
                        ListTile(title: Text('Wednesday 4')),
                        ListTile(title: Text('Thursday 5')),
                        ListTile(title: Text('Friday 6')),
                        ListTile(title: Text('Saturday 7')),
                        ListTile(title: Text('Sunday 8')),
                        ListTile(title: Text('Monday 9')),
                        ListTile(title: Text('Tuesday 10')),
                        ListTile(title: Text('Wednesday 11')),
                        ListTile(title: Text('Thursday 12')),
                        ListTile(title: Text('Friday 13')),
                        ListTile(title: Text('Saturday 14')),
                      ],
                    ),
                    ListView(
                      children: &lt;Widget&gt;[
                        ListTile(title: Text('January')),
                        ListTile(title: Text('February')),
                        ListTile(title: Text('March')),
                        ListTile(title: Text('April')),
                        ListTile(title: Text('May')),
                        ListTile(title: Text('June')),
                        ListTile(title: Text('July')),
                        ListTile(title: Text('August')),
                        ListTile(title: Text('September')),
                        ListTile(title: Text('October')),
                        ListTile(title: Text('November')),
                        ListTile(title: Text('December')),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      );
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/iZ5rk.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/iZ5rk.gif" alt="enter image description here"></a></p>