title: Flutter TabBar and TabBarView inside body of the application
body: <p>I was trying to build a UI for my application like this. But views of tabs  are not visible. I've used tabs in many flutter applications but the UI has to exactly like below</p>
  
  <ul>
  <li>Appbar with image as background</li>
  <li>Half portion of user image in appbar section and rest below it </li>
  <li>A tabbar below these.
  .
  .
  .</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/dapMX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dapMX.png" alt="Current UI"></a>
  <a href="https://i.stack.imgur.com/IaIiW.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/IaIiW.gif" alt="enter image description here"></a></p>
  
  <p>My code here </p>
  
  <pre><code>class _MyHomePageState extends State&lt;MyHomePage&gt; with 
  TickerProviderStateMixin{
  double screenSize;
  double screenRatio;
  AppBar appBar;
  List&lt;Tab&gt; tabList = List();
  TabController _tabController;
  @override
  void initState() {
  tabList.add(new Tab(text:'Overview',));
  tabList.add(new Tab(text:'Workouts',));
  _tabController = new TabController(vsync: this, length: 
  tabList.length);
  super.initState();
  }
  @override
  void dispose() {
  _tabController.dispose();
  super.dispose();
  }
  @override
  Widget build(BuildContext context) {
  screenSize = MediaQuery.of(context).size.width;
  appBar = AppBar(
   backgroundColor: Colors.transparent,
   elevation: 0.0,
  );
  return Container(
   color: Colors.white,
   child: Stack(
     children: &lt;Widget&gt;[
       new Container(
         height: 300,
         width: screenSize,
         decoration:new BoxDecoration(
           image: new DecorationImage(
             image: new AssetImage("images/app_image.jpg"),
             fit: BoxFit.cover,
           ),
         ),
       ),
       Scaffold(
         backgroundColor: Colors.transparent,
         appBar: appBar,
         body:
           Stack(
             children: &lt;Widget&gt;[
               new Positioned(
                 child: Column(
                   children: &lt;Widget&gt;[
                     Center(
                       child: Container(
                         child: CircleAvatar(
                             backgroundImage: 
  NetworkImage('http://res.cloudinary.com/'),
                           backgroundColor: Colors.green,
                           radius: 20,
                         ),
                       ),
                     ),
                     SingleChildScrollView(
                       child: Container(
                         color: Colors.white,
                         child: Column(
                           mainAxisAlignment: MainAxisAlignment.center,
                           children: &lt;Widget&gt;[
                             new Text('* * * * *',textAlign: TextAlign.center,style: TextStyle(fontSize: 18.0,color: Colors.pink),),
                             new Text('CAPTAIN',textAlign: TextAlign.center,style: TextStyle(fontSize: 18.0)),
                           ],
                           crossAxisAlignment: CrossAxisAlignment.center,
                         ),
                       ),
                     ),
                   ],
                 ),
                 width: screenSize,
                 top: 170,
               ),
                new Positioned(
                  width: screenSize,
                  top: 310,
                  child: Padding(
                    padding: const EdgeInsets.all(12.0),
                    child: new Column(
                     children: &lt;Widget&gt;[
                       new Container(
                         decoration: new BoxDecoration(color: Theme.of(context).primaryColor),
                         child: new TabBar(
                           controller: _tabController,
                           indicatorColor: Colors.pink,
                           indicatorSize: TabBarIndicatorSize.tab,
                           tabs: tabList
                         ),
                       ),
                       new Container(
                         height: 20.0,
                         child: new TabBarView(
                           controller: _tabController,
                           children: tabList.map((Tab tab){
                             _getPage(tab);
                           }).toList(),
                         ),
                       )
                     ],
               ),
                  ),
                )
             ],
           ),
       ),
     ],
   ),
   );
   }
  Widget _getPage(Tab tab){
  switch(tab.text){
    case 'Overview': return OverView();
    case 'Orders': return Workouts();
   }
  }
  }
  </code></pre>