How to create a tab bar at center of the screen in flutter?
I added a demo of what you are trying to get (I followed the Image you posted):
NOTE : I had to make few changes to the way you arranged your widget tree.
class profilePage extends StatefulWidget { @override profilePageState createState() => profilePageState();}class profilePageState extends State<profilePage> { @override Widget build(BuildContext context) { return DefaultTabController( length: 2, child: Scaffold( appBar: AppBar( title: Text( 'My Profile', ), centerTitle: true, backgroundColor: Colors.grey[700].withOpacity(0.4), elevation: 0, // give the app bar rounded corners shape: RoundedRectangleBorder( borderRadius: BorderRadius.only( bottomLeft: Radius.circular(20.0), bottomRight: Radius.circular(20.0), ), ), leading: Icon( Icons.menu, ), ), body: Column( children: <Widget>[ // construct the profile details widget here SizedBox( height: 180, child: Center( child: Text( 'Profile Details Goes here', ), ), ), // the tab bar with two items SizedBox( height: 50, child: AppBar( bottom: TabBar( tabs: [ Tab( icon: Icon(Icons.directions_bike), ), Tab( icon: Icon( Icons.directions_car, ), ), ], ), ), ), // create widgets for each tab bar here Expanded( child: TabBarView( children: [ // first tab bar view widget Container( color: Colors.red, child: Center( child: Text( 'Bike', ), ), ), // second tab bar viiew widget Container( color: Colors.pink, child: Center( child: Text( 'Car', ), ), ), ], ), ), ], ), ), ); }}OUTPUT:
To put the TabBar at the center of the screen, your Profile Container's height should be the screen height divided by 2
Like this
class profilePage extends StatefulWidget { @override profilePageState createState() => profilePageState();}class profilePageState extends State<profilePage> with SingleTickerProviderStateMixin { TabController _tabController; @override void initState() { _tabController = new TabController(length: 2, vsync: this); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( body: Container( child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( height: MediaQuery.of(context).size.height /2, child: Center(child: Text("Profile"),), color: Colors.blue, ), TabBar( unselectedLabelColor: Colors.black, labelColor: Colors.red, tabs: [ Tab( icon: Icon(Icons.people), ), Tab( icon: Icon(Icons.person), ) ], controller: _tabController, indicatorSize: TabBarIndicatorSize.tab, ), Expanded( child: TabBarView( children: [Text('people'), Text('Person')], controller: _tabController, ), ), ], ), ), ); }}Result: 
Also can try this,
AppBar( leading: IconButton( constraints: BoxConstraints(), padding: EdgeInsets.zero, icon: Container( padding: EdgeInsets.fromLTRB(10, 5, 0, 5), decoration: BoxDecoration( borderRadius: const BorderRadius.all(Radius.circular(20)), // color: MyColors.primaryColorLight.withAlpha(20), color: Colors.white, ), child: Icon( Icons.arrow_back_ios, color: kPrimaryColor, // size: 16, ), ), onPressed: () => Navigator.of(context).pop(), ), backgroundColor: kPrimaryColor, toolbarHeight: 80, elevation: 5.0, title: TabBar(//Add tab bar to title indicator: BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(30)), color: Colors.white), labelColor: kPrimaryColor, unselectedLabelColor: Colors.white, indicatorSize: TabBarIndicatorSize.label, isScrollable: true, tabs: [ Container( height: 30.0, width: 100, child: Tab( child: Align( alignment: Alignment.center, child: Text( "Ongoing", style: TextStyle(fontSize: 16), ), ), ), ), Container( width: 100, height: 30.0, child: Tab( child: Align( alignment: Alignment.center, child: Text( "Requests", style: TextStyle(fontSize: 16), ), ), ), ), ], ), )