Flutter - using routes in bottomnavigationbar - flutter

Question

Im trying to navigate to next page via switch index, but it doesn't work.
Does anyone knows how should I use switch case? thank you
Below is my code:
child: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: _selectedIndex == 0
? SvgPicture.asset('assets/icons/home_colored.svg')
: SvgPicture.asset('assets/icons/home.svg'),
title: Text('Home', style: bottomTextStyle),
),
BottomNavigationBarItem(
icon: _selectedIndex == 1
? SvgPicture.asset('assets/icons/order_colored.svg')
: SvgPicture.asset('assets/icons/order.svg'),
title: Text(
'My Card',
style: bottomTextStyle,
),
),
BottomNavigationBarItem(
icon: _selectedIndex == 2
? SvgPicture.asset('assets/icons/watch_colored.svg')
: SvgPicture.asset('assets/icons/watch.svg'),
title: Text(
'Watch List',
style: bottomTextStyle,
),
),
BottomNavigationBarItem(
icon: _selectedIndex == 3
? SvgPicture.asset('assets/icons/account_colored.svg')
: SvgPicture.asset('assets/icons/account.svg'),
title: Text(
'Account',
style: bottomTextStyle,
),
),

Answer 1

In the below code "HomeScreen()" and "NotificationHome()" are the class name to which we need to navigate on tap."
class Bottom_Nav extends StatefulWidget {
const Bottom_Nav({Key? key}) : super(key: key);
#override
_Bottom_NavState createState() => _Bottom_NavState();
}
class _Bottom_NavState extends State<Bottom_Nav> {
int selectedPage = 0;
final _pageOptions = [
const HomeScreen(),
//const searchHome(),
NotificationHome(),
];
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: _pageOptions[selectedPage],
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home, size: 30), label: ('Home')),
BottomNavigationBarItem(
icon: Badge(
badgeContent: Text('3'),
child: Icon(Icons.notifications, size: 30)),
label: ("Notification")),
],
selectedItemColor: bottomBarSelected,
elevation: 5.0,
unselectedItemColor: bottomBarNotSelected,
currentIndex: selectedPage,
backgroundColor: Colors.white,
onTap: (index) {
setState(() {
selectedPage = index;
});
},
));
}
}
Comment if you have any doubt,
Thank you.

Answer 2

Try below code hope its help to you just add your images or icons instead of my answer Icons :
Go for documentation here
BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: _selectedIndex == 0 ? Icon(Icons.home) : Icon(Icons.add),
label: 'Home',
),
BottomNavigationBarItem(
icon: _selectedIndex == 1 ? Icon(Icons.business) : Icon(Icons.person),
label: 'Business',
),
BottomNavigationBarItem(
icon: _selectedIndex == 2 ? Icon(Icons.school) : Icon(Icons.close),
label: 'School'
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
Your result screen when your index is 0 ->
Your result screen when your index is 1 ->

Answer 3

Solution!
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyNavigationBar (),
);
}
}
class MyNavigationBar extends StatefulWidget {
MyNavigationBar ({Key key}) : super(key: key);
#override
_MyNavigationBarState createState() => _MyNavigationBarState();
}
class _MyNavigationBarState extends State<MyNavigationBar> {
int _selectedIndex = 0;
static const List<Widget> _widgetOptions = <Widget>[
Text('Home Page', style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
Text('Search Page', style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
Text('Profile Page', style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
if(__selectedIndex == 0){
Navigator.push(
context,
MaterialPageRoute(builder: (context) => secondPage()),
);
} else if (__selectedIndex == 1){
Navigator.push(
context,
MaterialPageRoute(builder: (context) => thirdPage()),
);
} else if (__selectedIndex == 2){
Navigator.push(
context,
MaterialPageRoute(builder: (context) => fourthPage()),
);
} else if (__selectedIndex == 3){
Navigator.push(
context,
MaterialPageRoute(builder: (context) => firstPage()),
);
}
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter BottomNavigationBar Example'),
backgroundColor: Colors.green
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[l̥
BottomNavigationBarItem(
icon: _selectedIndex == 0
? SvgPicture.asset('assets/icons/home_colored.svg')
: SvgPicture.asset('assets/icons/home.svg'),
title: Text('Home', style: bottomTextStyle),
),
BottomNavigationBarItem(
icon: (_selectedIndex == 1)
? SvgPicture.asset('assets/icons/order_colored.svg')
: SvgPicture.asset('assets/icons/order.svg'),
title: Text(
'My Card',
style: bottomTextStyle,
),
),
BottomNavigationBarItem(
icon: (_selectedIndex == 2)
? SvgPicture.asset('assets/icons/watch_colored.svg')
: SvgPicture.asset('assets/icons/watch.svg'),
title: Text(
'Watch List',
style: bottomTextStyle,
),
),
BottomNavigationBarItem(
icon: (_selectedIndex == 3)
? SvgPicture.asset('assets/icons/account_colored.svg')
: SvgPicture.asset('assets/icons/account.svg'),
title: Text(
'Account',
style: bottomTextStyle,
),
),
],
type: BottomNavigationBarType.shifting,
currentIndex: _selectedIndex,
selectedItemColor: Colors.black,
iconSize: 40,
onTap: _onItemTapped,
elevation: 5
),
);
}
}
Replace secondPage(), thirdPage(), fourthPage(), firstPage() with class names to which you want to navigate and provide arguments if you have any?..
example: secondPage('Second Page Title')
Comment if you have any doubts, Thank you.