Bottom Navigtor Bar using Flutter (Responsive Size fit)
Hello all,
Today we will have a discussion on how we can make a responsive bottom navigator with icons that can be called from any page using the below method.
return Container(
height: 68,
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
color: Color.fromRGBO(255, 255, 255, 0.9),
elevation: 4,
shadowColor: Colors.green,
child:Row(
children: [
Expanded(
flex: 1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 50,
child: IconButton(
icon: SvgPicture.asset( ( widget.pagename == "home") ? selected_images[0]:images[0],height: ( widget.pagename == "home") ? 25:20),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Home()));
},
),
),
SizedBox(
height: 10.0,
child: SvgPicture.asset(
"assets/images/dash_green.svg",
width: 150,
color: widget.pagename == "home"
? Colors.green
: Colors.white,
)),
],
),
),
Expanded(
flex: 1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 50,
child: IconButton(
icon: SvgPicture.asset(( widget.pagename == "favs") ? selected_images[1]:images[1],height: ( widget.pagename == "favs") ? 25:20),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Favorites()));
},
),
),
SizedBox(
height: 10.0,
child: SvgPicture.asset(
"assets/images/dash_green.svg",
width: 150,
color: widget.pagename == "favs"
? Colors.green
: Colors.white,
)),
],
),
),
Expanded(
flex: 1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 50,
child: IconButton(
icon: SvgPicture.asset(( widget.pagename == "shots") ? selected_images[2]:images[2],height: ( widget.pagename == "shots") ? 25:20),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Spotlight()));
},
),
),
SizedBox(
height: 10.0,
child: SvgPicture.asset(
"assets/images/dash_green.svg",
width: 150,
color: widget.pagename == "shots"
? Colors.green
: Colors.white,
)),
],
),
),
Expanded(
flex: 1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 50,
child: IconButton(
icon: SvgPicture.asset(( widget.pagename == "orders") ? selected_images[3]:images[3],height: ( widget.pagename == "orders") ? 25:20),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Order_list2()));
},
),
),
SizedBox(
height: 10.0,
child: SvgPicture.asset(
"assets/images/dash_green.svg",
width: 150,
color: widget.pagename == "orders"
? Colors.green
: Colors.white,
)),
],
),
),Expanded(
flex: 1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 50,
child: IconButton(
icon: SvgPicture.asset(( widget.pagename == "cart") ? selected_images[4]:images[4],height: ( widget.pagename == "cart") ? 25:20),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Cartscreen()));
},
),
),
SizedBox(
height: 10.0,
child: SvgPicture.asset(
"assets/images/dash_green.svg",
width: 150,
color: widget.pagename == "cart"
? Colors.green
: Colors.white,
)),
],
),
),
],
),
),
)
As the above code will create bar then gives return to use it we have to use like classname.methodname();
Expand is the Widget that we use for the responsive view in all screens by this we can use "flex" option which will let to divide the screen into pices to place in order.
Expand( flex:1, child: //any child method or image )
Thank you.
Tagged: