How to make navigation menu reusable in flutter - flutter

Question

I have a navigation menu which I created using a container, within my container there is a column which contains all my icons. When the user click's on certain icons or the login button at the bottom right corner I am suppose to be able to navigate/route to the next screen. I know that when we move to the next screen the menu on the left will disappear, is there a way to keep the menu bar persistent across all screens. I was assuming that I need to create a separate class/widget specifically for the menu bar and call it on each page that I route to. I am still new to flutter so I wasn't sure if there might be another approach to this problem. I also need to persist the row at the top onto all pages as well.
Widget build(BuildContext context) {
return Container(
width: 1280,
height: 800,
decoration: BoxDecoration(
color: Color.fromRGBO(227, 227, 227, 1),
),
child: Material(
child: Stack(
children: <Widget>[
Positioned(
top: 0,
left: 80,
child: Container(
width: 1200,
height: 70,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/Topbarbackground.png'),
fit: BoxFit.fitWidth
),
)
)
), Positioned(
top: 652,
left: 0,
child: Container(
width: 1280,
height: 100,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/Rectangle112.png'),
fit: BoxFit.fitWidth
),
)
)
), Positioned(
top: 0,
left: 0,
child: Container(
child: ListView(
children: [
SizedBox(
height: 50.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/Back.png'),
onPressed: () {},
),
),
SizedBox(
width: 0.0,
height: 150.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/tip_load.png'),
onPressed: () {},
),
),
SizedBox(
width: 0.0,
height: 50.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/tip_eject.png'),
onPressed: () {
},
),
),
SizedBox(
height: 125.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/Light.png'),
onPressed: () {},
),
),
IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/Utility.png'),
onPressed: () {},
),
SizedBox(
height: 125.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/Help.png'),
onPressed: () {},
),
),
SizedBox(
height: 100.0,
child: IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/User.png'),
onPressed: () {},
),
),
IconButton(
padding: EdgeInsets.all(0.0),
icon: Image.asset('assets/icons/Power.png'),
onPressed: () {},
),
],
),

Answer 1

It is possible to do that. You have to put the sidebar in a separate widegt and then make a widget that shows it in a Row. Then you will need to change the builder of the main file in a way that the widget with the row can be displayed. This isn't the best explanation so I recommend you to read through this article:
https://medium.com/geekculture/persistent-widget-across-all-screens-using-flutter-navigator-45e6b2e57cf7
It showcases everything and gives you a short tutorial. I hope this helped.