The page is loading fine but, how can I add the contact details in the center of prototype to the center of the Appbar and the bottom navigation bar? Can anyone tell me how can I add that..
Updated the full code as requested in the comments.
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
String title = 'Tabar / BottomNavigationBar';
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(length: 5, vsync: this);
}
@override
void dispose() {
super.dispose();
_tabController.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
bottom: PreferredSize(child: Container(),
preferredSize: Size.fromHeight(45.0)
),
backgroundColor: Colors.white,
title: Image.asset('images/logo1.jpg',
height: 50.0,
width: 70.0),
),
body: TabBarView(
controller: _tabController,
physics: NeverScrollableScrollPhysics(),
children: [
TopTabBar(),
Center(
child: Text('Accounts',
style: TextStyle(fontSize: 25.0)
),
),
Center(
child: Text('Service',
style: TextStyle(fontSize: 25.0)
),
),
Center(
child: Text('Products',
style: TextStyle(fontSize: 25.0)
),
),
Center(
child: Text('Log Out',
style: TextStyle(fontSize: 25.0)
),
),
],
),
bottomNavigationBar: Container(
color: Colors.amber,
child: TabBar(
controller: _tabController,
unselectedLabelColor: Colors.black,
indicator: UnderlineTabIndicator(
borderSide: BorderSide(width: 0.0),
),
labelColor: Colors.white,
labelStyle: TextStyle(fontSize: 12.0),
tabs: [
Tab(
icon: Icon(Icons.home),
text: 'Home',
),
Tab(
icon: Icon(Icons.account_balance),
text: 'Accounts',
),
Tab(
icon: Icon(Icons.home_repair_service),
text: 'Service',
),
Tab(
icon: Icon(Icons.account_circle_rounded),
text: 'Products',
),
Tab(
icon: Icon(Icons.logout),
text: 'Log Out',
),
],
),
),
);
}
}
class TopTabBar extends StatefulWidget {
TopTabBar({Key key}) : super(key: key);
@override
_TopTabBarState createState() => _TopTabBarState();
}
class _TopTabBarState extends State<TopTabBar>
with SingleTickerProviderStateMixin {
TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(length: 3, vsync: this);
}
@override
void dispose(){
super.dispose();
_tabController.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(kToolbarHeight),
child: Container(
color: Colors.amber,
child: TabBar(
controller: _tabController,
indicator: UnderlineTabIndicator(
borderSide: BorderSide(width: 0.0),
),
indicatorColor: Colors.white,
unselectedLabelColor: Colors.black,
labelColor: Colors.white,
indicatorWeight: 5.0,
tabs: [
Tab(
text: 'Contact Us'
),
Tab(
text: 'Nearest Branch'
),
Tab(
text: 'Nearest ATM'
),
],
),
),
),
);
}
}
This is my prototype and the interface generated by the code
