title: flutter fix tabbar in top of screen when i scroll the view
body: <p>like with <code>Instagram</code> in profile page of that, i want to fix <code>Tabbar</code> on top of screen when i scroll the view, for example:</p>
  
  <p><a href="https://i.stack.imgur.com/BJ170.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BJ170.jpg" alt="enter image description here"></a></p>
  
  <p>i think i should implementing that with <code>SliverAppBar</code>, this is my code, but it doesn't work correctly and in that top of tab elements will be change height</p>
  
  <pre class="lang-dart prettyprint-override"><code>import 'package:flutter/material.dart';
  
  void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      );
    }
  }
  
  class MyHomePage extends StatefulWidget {
    @override
    _MyHomePageState createState() =&gt; _MyHomePageState();
  }
  
  class _MyHomePageState extends State&lt;MyHomePage&gt;
      with SingleTickerProviderStateMixin {
    TabController _tabController;
    ScrollController _scrollViewController;
  
    @override
    void initState() {
      super.initState();
      _tabController = TabController(vsync: this, length: 2);
      _scrollViewController = ScrollController(initialScrollOffset: 0.0);
    }
  
    @override
    void dispose() {
      _tabController.dispose();
      _scrollViewController.dispose();
      super.dispose();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: NestedScrollView(
          controller: _scrollViewController,
          headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
            return &lt;Widget&gt;[
              SliverAppBar(
                title: Column(
                  children: &lt;Widget&gt;[
                    Container(
                      height: 200.0,
                      color: Colors.green,
                    ),
                    Container(
                      height: 200.0,
                      color: Colors.yellow,
                    ),
  
                  ],
                ),
                pinned: true,
                floating: true,
                forceElevated: boxIsScrolled,
                bottom: TabBar(
                  tabs: &lt;Widget&gt;[
                    Tab(
                      text: "Home",
                      icon: Icon(Icons.home),
                    ),
                    Tab(
                      text: "Example page",
                      icon: Icon(Icons.help),
                    )
                  ],
                  controller: _tabController,
                ),
              )
            ];
          },
          body: TabBarView(
            children: &lt;Widget&gt;[
              PageOne(),
              PageTwo(),
            ],
            controller: _tabController,
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.control_point),
          onPressed: () {
            _tabController.animateTo(1,
                curve: Curves.bounceInOut, duration: Duration(milliseconds: 10));
  
            // _scrollViewController.animateTo(
            //     _scrollViewController.position.minScrollExtent,
            //     duration: Duration(milliseconds: 1000),
            //     curve: Curves.decelerate);
  
            _scrollViewController
                .jumpTo(_scrollViewController.position.maxScrollExtent);
          },
        ),
      );
    }
  }
  
  class PageOne extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: &lt;Widget&gt;[
            Image.asset(
              'assets/photos/wallpaper-1.jpg',
              width: 200.0,
            ),
            Image.asset(
              'assets/photos/wallpaper-2.jpg',
              width: 200.0,
            ),
            Image.asset(
              'assets/photos/wallpaper-3.jpg',
              width: 200.0,
            ),
          ],
        ),
      );
    }
  }
  
  class PageTwo extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return ListView.builder(
        itemExtent: 250.0,
        itemBuilder: (context, index) =&gt; Container(
          padding: EdgeInsets.all(10.0),
          child: Material(
            elevation: 4.0,
            borderRadius: BorderRadius.circular(5.0),
            color: index % 2 == 0 ? Colors.cyan : Colors.deepOrange,
            child: Center(
              child: Text(index.toString()),
            ),
          ),
        ),
      );
    }
  }
  </code></pre>