I have this bottom navigation bar with center docked floating icon,the bottom bar is present and i can go through the tab elements in bottombar but i need to show the bottom bar fixed to every screen,what ever screen i open i need to show the bottombar navigation
1.How can i view the bottombar in subpages example if i goto home screen and i am going click an item in hompage and redirect next page then the bottom nav bar should show the redirected page
Bottombar navigation
class BottomViewScreenState extends State<BottomViewScreen> {
TabController tabController;
static int _selectedTab = 0;
final List<Widget> _children = [
new HomeScreen(),
new OfferScreen(),
new HelpScreen(),
new ProfileScreen(),
new CartViewScreen(),
];
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
theme: ThemeData(
primaryColor: Color(0xffFF5555),
),
home: Scaffold(
body: _children[_selectedTab], // new
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
onPressed: () {
// new CartViewScreen();
//onTabTapped(4);
// CartViewScreen();
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CartViewScreen(),
),
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.add_shopping_cart),
Text(
"CART",
style: TextStyle(fontSize: 8.0),
),
],
),
backgroundColor: Colors.indigo[900],
foregroundColor: Colors.white,
elevation: 2.0,
),
bottomNavigationBar: BottomAppBar(
clipBehavior: Clip.antiAlias,
notchMargin: 10.0,
shape: CircularNotchedRectangle(),
child: SizedBox(
height: 80,
child: Theme(
data: Theme.of(context).copyWith(
// sets the background color of the `BottomNavigationBar`
canvasColor: Colors.white,
// sets the active color of the `BottomNavigationBar` if `Brightness` is light
primaryColor: Colors.amberAccent,
textTheme: Theme.of(context)
.textTheme
.copyWith(caption: new TextStyle(color: Colors.grey))),
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
onTap: onTabTapped,
currentIndex: _selectedTab,
fixedColor: Colors.amberAccent,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
'HOME',
style: TextStyle(fontSize: 10.0),
),
activeIcon: Column(
children: <Widget>[
Icon(Icons.local_offer),
],
),
),
BottomNavigationBarItem(
icon: SvgPicture.asset(
"assets/images/ic_bottom_offer.svg",
height: 25,
color: Colors.grey,
),
title: Text('OFFERS', style: TextStyle(fontSize: 10.0))),
BottomNavigationBarItem(
icon: Icon(Icons.info_outline),
title: Text('HELP', style: TextStyle(fontSize: 10.0))),
BottomNavigationBarItem(
icon: Icon(Icons.people),
title: Text('PROFILE', style: TextStyle(fontSize: 10.0))),
],
),
),
),
),
),
);
}
void onTabTapped(int index) {
setState(() {
_selectedTab = index;
});
}
}
Main
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: "App",
home: new SplashScreen(),
routes: {
"/homescreen": (_) => new BottomViewScreen(),
"/login":(_) => new LoginScreen(),
},
);
}
}
See Question&Answers more detail:
os