简体   繁体   中英

How to make navigation menu reusable in flutter

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: () {},
                           ),
                         ],
                       ),

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM