Flutter TabBar and TabBarView inside body of the application - flutter

Question

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
Appbar with image as background
Half portion of user image in appbar section and rest below it
A tabbar below these.
.
.
.
My code here
class _MyHomePageState extends State<MyHomePage> with
TickerProviderStateMixin{
double screenSize;
double screenRatio;
AppBar appBar;
List<Tab> 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: <Widget>[
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: <Widget>[
new Positioned(
child: Column(
children: <Widget>[
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: <Widget>[
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: <Widget>[
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();
}
}
}

Answer 1

tabList.map((Tab tab){
_getPage(tab);
}).toList()
The piece above is from your provided code, you called _getPage(tab) in the map without a return statement. Simply make a slight change to this
tabList.map((Tab tab){
return _getPage(tab);
}).toList()
Or
tabList.map((Tab tab) => _getPage(tab)).toList()

Answer 2

children: tabList.map((Tab tab){
_getPage(tab);
}).toList(),
Some how this above your logic will getting null children for TabBarView, So views of tabs are not visible, need to check for it.
OtherWise you can assign children of TabBarView manualy
children: <Widget>[
OverView(),
Workouts(),
],