How to give onPress function for BottomNavigationBar menu in flutter? - flutter

Question

i have a bottomnavigation bar in flutter ,what i want is on click of the individual widgets of the bottombar it should navigate me to the next page
Widget _bottemTab() {
return new BottomNavigationBar(
currentIndex: _currentIndex,
onTap:(newIndex) => setState((){_currentIndex = newIndex;}),
type: BottomNavigationBarType.fixed,
items: [
new BottomNavigationBarItem(
icon: Image.asset(
"assets/home.png",
width: 24.0,
height: 24.0,
),
title: Text(
'Home',
),
),
new BottomNavigationBarItem(
icon: Image.asset(
"assets/shopping-bagg.png",
width: 24.0,
height: 24.0,
),
title: Text(
'Mall',
)),
new BottomNavigationBarItem(
icon: Image.asset(
"assets/qr-code.png",
width: 24.0,
height: 24.0,
),
title: Text(
'Scan',
)),
new BottomNavigationBarItem(
icon: Image.asset(
"assets/bank.png",
width: 24.0,
height: 24.0,
),
title: Text(
'Bank',
)),
new BottomNavigationBarItem(
icon: Image.asset(
"assets/delivery.png",
width: 24.0,
height: 24.0,
),
title: Text(
'Inbox',
)),
]);
}
i want is on click of the individual widgets of the bottombar it should navigate me to the next page which i have created separately for each menu items of bottom navigation view..any help is appreciated

Answer 1

In your build() method, you can add this logic.
#override
Widget build(BuildContext context) {
Widget widget = Container(); // default
switch (_currentIndex) {
case 0:
widget = FirstPage();
break;
case 1:
widget = SecondPage();
break;
case 2:
widget = ThirdPage();
break;
}
return Scaffold(
body: widget,
// ...
);
}
Update:
I'm not sure how you did that, here you can see a small example of doing it right way.
int _index = 0;
#override
Widget build(BuildContext context) {
Widget child = Container();
switch(_index) {
case 0:
child = FlutterLogo(colors: Colors.orange);
break;
case 1:
child = FlutterLogo();
break;
}
return Scaffold(
appBar: AppBar(),
bottomNavigationBar: _bottomTab(),
body: SizedBox.expand(child: child),
);
}
Widget _bottomTab() {
return BottomNavigationBar(
currentIndex: _index,
onTap: (int index) => setState(() => _index = index),
backgroundColor: Colors.deepPurple,
items: [
BottomNavigationBarItem(icon: Icon(Icons.looks_one), title: Text("1")),
BottomNavigationBarItem(icon: Icon(Icons.looks_two), title: Text("2")),
],
);
}

Answer 2

Hope this helps.
int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const _pages = <Widget>[
Home(),//this is a stateful widget on a separate file
Business(),//this is a stateful widget on a separate file
School(),//this is a stateful widget on a separate file
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _pages.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Business'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('School'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}