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
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();
}
}
}
To add tabs in flutter app, we need to Wrap Scaffold Widget with DefaultTabController & provide a length (the number of tabs you want to create), then in flutter appbar create tabBar with tabs, then in body use TabBarView & define some widget or pages that you want to show when tabs from flutter tabbar are selected.
If you want to implement tab layout, first you need to have a tab bar which contains the list of tabs. In Flutter, you can use the TabBar widget. The TabBar can be placed anywhere according to the design. If you want to place it right under the AppBar , you can pass it as the bottom argument of the AppBar .
You can create tabs using the TabBar widget. In this example, create a TabBar with three Tab widgets and place it within an AppBar . return MaterialApp( home: DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( bottom: const TabBar( tabs: [ Tab(icon: Icon(Icons. directions_car)), Tab(icon: Icon(Icons.
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()
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(),
],
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With