Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter TabBar and TabBarView inside body of the application

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. . . .

Current UI enter image description here

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();
 }
}
}
like image 781
Rafid Kotta Avatar asked Mar 26 '19 21:03

Rafid Kotta


People also ask

How do you use TabBar in body in Flutter?

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.

How do I use TabBar and Tabview in Flutter?

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 .

How do you create multiple tabs in Flutter?

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.


2 Answers

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()
like image 133
Egere Samuel.o.c. Avatar answered Oct 12 '22 19:10

Egere Samuel.o.c.


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(),
],
like image 27
Android Team Avatar answered Oct 12 '22 18:10

Android Team