title: how to implement a sliverAppBar with a tabBar
body: <p>the flutter document show a <a href="https://docs.flutter.io/flutter/widgets/NestedScrollView-class.html" rel="noreferrer">demo</a> for <code>SliverAppBar</code> + <code>TabBar</code> + <code>TabBarView with ListView</code> use <code>NestedScrollView</code>, and it's a bit complex, so I wonder is there a simply and clear way to implement it. I tried this:</p>
  
  <pre><code>CustomScrollView
    slivers:
      SliverAPPBar
        bottom: TabBar
      TabBarView
        children: MyWidget(list or plain widget)
  </code></pre>
  
  <p>got error:</p>
  
  <blockquote>
    <p>flutter: The following assertion was thrown building Scrollable(axisDirection: right, physics:<br>
    flutter: A RenderViewport expected a child of type RenderSliver but received a child of type _RenderExcludableScrollSemantics.<br>
    flutter: RenderObjects expect specific types of children because they coordinate with their children during layout and paint. For example, a RenderSliver cannot be the child of a RenderBox because a RenderSliver does not understand the RenderBox layout protocol.</p>
  </blockquote>
  
  <p>and</p>
  
  <blockquote>
    <p>flutter: Another exception was thrown: 'package:flutter/src/widgets/framework.dart': Failed assertion: line 3497 pos 14: 'owner._debugCurrentBuildTarget == this': is not true.</p>
  </blockquote>
  
  <p>HERE IS MY CODE:</p>
  
  <pre><code>import 'package:flutter/material.dart';
  
  main(List&lt;String&gt; args) {
    runApp(MyScrollTabListApp());
  }
  
  class MyScrollTabListApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(title: "aa", home: MyScrollTabListHomePage());
    }
  }
  
  class MyScrollTabListHomePage extends StatefulWidget {
    @override
    MyScrollTabListHomePageState createState() {
      return new MyScrollTabListHomePageState();
    }
  }
  
  class MyScrollTabListHomePageState extends State&lt;MyScrollTabListHomePage&gt;
      with SingleTickerProviderStateMixin {
    final int _listItemCount = 300;
    final int _tabCount = 8;
    TabController _tabController;
  
    @override
    void initState() {
      _tabController = TabController(length: _tabCount, vsync: this);
      super.initState();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: CustomScrollView(
          slivers: &lt;Widget&gt;[
            SliverAppBar(
              expandedHeight: 240.0,
              title: Text("Title"),
              pinned: true,
              bottom: TabBar(
                controller: _tabController,
                isScrollable: true,
                tabs: List&lt;Tab&gt;.generate(_tabCount, (int i) {
                  return Tab(text: "TAB$i");
                }),
              ),
            ),
            TabBarView(
              controller: _tabController,
              children: List&lt;Widget&gt;.generate(_tabCount, (int i) {
                return Text('line $i');
              }),
            ),
          ],
        ),
      );
    }
  }
  </code></pre>
  
  <p>and for the official demo, it use struct like this</p>
  
  <pre><code>DefaultTabController
      NestedScrollView
        headerSliverBuilder
          SliverOverlapAbsorber
            handle
            SliverAppBar
          TabBarView
            CustomScrollView
              SliverOverlapInjector
                handle
                SliverPadding
  </code></pre>