Drawing a Drawer Pull With the Follow Me Tool

When comes to the navigation in-app, Piloting drawer can be considered of the uncomparable primary method acting of Navigation

InFlutter, Navigation Drawer comes with the Scaffold widget. Hence before adding a seafaring drawer we need to define aScaffold.

When we are creating a sample flutter app, information technology comes with the default scaffold. Thither is an option to set a drawer like downstairs

                              Scaffold(               drawer:              )                          

Create a basic navigation draftsman

Now we already have a frame with the Scaffold widget. For that, we need to setDrawer widget.

To properly structuring the Draftsman you demand to put back Header part and the to a lower place you give the axe impart some computer menu items. For that, you have to create aListview and add the first child as aDrawerHeader and after that, you can addListTile widget to demonstrate other menu items.

                              drawer: Drawer(       child: ListView(         padding: EdgeInsets.zero,         children: [               DrawerHeader(                    child: Textual matter("Header"),                  ),               ListTile(                   title: Text("Home"),                 )         ],       ),   ),            

Navigation Drawer lintel image

Before adding an image you have to make an assets folder and create an images leaflet inside that. Then add your image to that folder.

Next inside thepubspec.yaml you need to meaning that asset. For that under the flapping add aassets section andimage like below

                              flutter:   assets:     - images/lintel.jpeg                          

The next matter inevitably to do is provide decoration toDrawerHeader. In there you can use set image usingDecorationImage widget. Please recollect to set fit ABoxFit.cover

                              drawer: Draftsman(       child: ListView(         padding: EdgeInsets.zero,         children: [           DrawerHeader(             decoration: BoxDecoration(               image: DecorationImage(                 icon: AssetImage("images/header.jpeg"),                 tally: BoxFit.cover               )             ),             child: Text("Header"),           ),           ListTile(             title: Text("Abode"),           )         ],       ),   )                          

Sailing Drawer Sticky header

Drawer items inside the ListView wish scroll all the child content when scroll. If you require to change that to keep the cope part adhesive and move only if the below items you have to perform some changes to the widget bodily structure

                              Drawer(       child: Column(           children: [             Dilated(               flex: 1,               tiddler: Container(                 width: MediaQuery.of(context).size.width * 0.85,                 kid: DrawerHeader(                   decoration: BoxDecoration(                       image: DecorationImage(                           image: AssetImage("images/header.jpeg"),                           fit: BoxFit.shroud)),                   child: Schoolbook("Lintel"),                 ),               ),             ),             Expanded(               turn: 2,               child: ListView(children: [                 ListTile(                   title: Text("Home"),                   onTap: () {                     Navigator.of(context).pop();                   },                 ),                 ListTile(                   deed of conveyance: Textbook("Home"),                   onTap: () {                     Navigator.of(context).pop();                   },                 ),                 ListTile(                   title: Text("Home"),                   onTap: () {                     Sailing master.of(context).bolt down();                   },                 ),                 ListTile(                   title: Text("Home"),                   onTap: () {                     Sailing master.of(circumstance).pop();                   },                 ),                 ListTile(                   title: Text("Home"),                   onTap: () {                     Sailing master.of(context).pop();                   },                 ),                 ListTile(                   title: Text edition("National"),                   onTap: () {                     Navigator.of(context of use).pop();                   },                 ),                 ListTile(                   title: Text("Home"),                   onTap: () {                     Navigator.of(context).pop();                   },                 ),                 ListTile(                   title: School tex("National"),                   onTap: () {                     Navigator.of(context).pop();                   },                 )               ]),             )           ],         ),   )                          

Close Navigation Drawer programmatically

Information technology pretty easy to close the drawer programmatically. You just need entirely use the come out method inNavigation class for the current context.

                              ListTile(             rubric: Text("Home"),             onTap: (){               Navigator.of(context).pop();             },           )                          

Open Navigation Drawer programmatically

First, you must set a key to the scaffold to identify. You can create a new object of GlobalKey class and ordered that to the scaffold paint. Then victimization that you commode access the ongoing state of the Scaffold and open the draftsman by careeropenDrawer method.

You tin call this method from any clit and in here I added a FlatButton to the personify and from there I am going to open the draftsman. You give notice also add a custom button to AppBar and trigger look-alike this to open a drawer.

                              final GlobalKey _scaffoldKey = new GlobalKey();                          

                              return Scaffold(       key: _scaffoldKey       ) // located key                          

                              FlatButton(               child: Text("Open Navigation"),               onPressed: (){                 _scaffoldKey.currentState.openDrawer();               },             ),            

Pilotage Drawer hamburger icon change and color change

If you are using Appbar you can addleading Icon to replace the hamburger Icon. You can set IconButton for that and scope the colour will also change the Icon colourise of that button.

Just when you add a custom button it will be mixed-up the drawer unfastened capacity. But you can employment the same old method to open the draftsman programmatically by vocationopenDrawer method.

                              appBar: AppBar(   leading: IconButton(     icon: Icon(Icons.gamepad,color: Colors.yellow,),     onPressed: (){       _scaffoldKey.currentState.openDrawer();     },    ),    title: Text(widget.title),   ),                          

Seafaring Draftsman in right incline

It pretty easy to move drawer from leftist to right. When you are creating a drawer originally, it usesdrawer option in Scaffold. You just motivation only to change that toendDrawer and the draftsman will make up open from the right. Also,hamburger menu will live a impress to the honorable.

                              return Scaffold(     key: _scaffoldKey,    endDrawer: Drawer(     child: ListView(       cushioning: EdgeInsets.cipher,       children: [         DrawerHeader(           medal: BoxDecoration(             mental image: DecorationImage(               image: AssetImage("images/header.jpeg"),               suit: BoxFit.cover             )           ),           minor: Text("Header"),         ),         ListTile(           title: Text edition("Home"),           onTap: (){             Navigator.of(context of use).pop();           },         )       ],     ), ),                          

Custom Navigation drawer

Drawer inside the Scaffold accepts Widget as a parameter. Thence we can add custom widget without using Drawer widget within the navigation.
In present I use Container as a main widget and roll up the other content inside that. Straight off when you test you will be able to see a full-screen draftsman.

                              drawer: Container(     breadth: MediaQuery.of(context).size.width,     height: MediaQuery.of(linguistic context).size.height,     color: Colours.white,     tiddler: ListView(       padding: EdgeInsets.zero,       children: [         DrawerHeader(           decoration: BoxDecoration(               double: DecorationImage(                   paradigm: AssetImage("images/head.jpeg"),                   fit: BoxFit.plow)),           child: Text("Heading"),         ),         ListTile(           title: School tex("Home"),           onTap: () {             Navigator.of(context).pop();           },         )       ],     ),   ),            

Conclusion

I desire you get a better idea active navigation drawer implementation in Flapping and how to customize drawer as you need. If you have some query finger free to ask.

Drawing a Drawer Pull With the Follow Me Tool

Source: https://mightytechno.com/flutter-navigation-drawer/

Share this post