How to use the drawer in flutter ?

<p>In the App, the drawer is very common, so let's see how to use the drawer; 1. ScaffoldThe Scaffold is a container that defines a parameter with drawer, As follow: [ color:#ffc66d;](Padding( padding: color:#ffc66d;](EdgeInsets.color:#ffc66d;](only(right: color:#6897bb;](10.0)color:#cc7832;](, color:#cc7832;]( child: color:#ffc66d;](IconButton( onPressed: () color:#cc7832;](, color:#cc7832;]( icon: color:#ffc66d;](Icon(Icons.color:#9876aa;font-style:italic;](more_vert)color:#cc7832;](, color:#cc7832;]( )color:#cc7832;](, color:#cc7832;]( ) ]color:#cc7832;](, color:#cc7832;]( )color:#cc7832;](, color:#cc7832;]( body: color:#9876aa;](bodycolor:#cc7832;](, color:#cc7832;]( floatingActionButton: color:#9876aa;](bottomIcon == color:#cc7832;font-weight:bold;](null color:#cc7832;font-weight:bold;]( ? color:#cc7832;font-weight:bold;](null color:#cc7832;font-weight:bold;]( : color:#ffc66d;](FloatingActionButton( onPressed: () color:#cc7832;](, color:#cc7832;]( child: color:#ffc66d;](Icon(color:#9876aa;](bottomIcon)color:#cc7832;](, color:#cc7832;]( )color:#cc7832;](, color:#cc7832;]( drawer: color:#cc7832;font-weight:bold;](this.color:#9876aa;](hasDrawer color:#9876aa;]( ? color:#ffc66d;](CommonDrawer( context: contextcolor:#cc7832;](, color:#cc7832;]( title: color:#9876aa;](titlecolor:#cc7832;](, color:#cc7832;]( ) : color:#cc7832;font-weight:bold;](nullcolor:#cc7832;](, color:#cc7832;]( )color:#cc7832;](; }2. Define our drawer Above code, we can see the class CommonDrawer, which is our defining drawer. Let's see the code: color:#ffc66d;](ListTile( title: color:#ffc66d;](Text( item[color:#6a8759;]("title"].substring(color:#6897bb;](1)color:#cc7832;](, color:#cc7832;]( style: color:#ffc66d;](TextStyle( color: Colors.color:#9876aa;font-style:italic;](grey[color:#6897bb;](900]color:#cc7832;](, color:#cc7832;]( fontWeight: FontWeight.color:#9876aa;font-style:italic;](w700color:#cc7832;](, color:#cc7832;]( fontSize: TEXT_NORMAL_SIZE)color:#cc7832;](, color:#cc7832;]( )color:#cc7832;](, color:#cc7832;]( leading: color:#ffc66d;](Icon( item[color:#6a8759;]("icon"]color:#cc7832;](, color:#cc7832;]( color: item[color:#6a8759;]("color"]color:#cc7832;](, color:#cc7832;]( )color:#cc7832;](, color:#cc7832;]( onTap: () { color:#cc7832;font-weight:bold;](var isEqual = item[color:#6a8759;]("title"].substring(color:#6897bb;](1) == color:#9876aa;](titlecolor:#cc7832;](; color:#cc7832;]( color:#cc7832;font-weight:bold;](if (isEqual || color:#cc7832;font-weight:bold;](this.color:#9876aa;](context == color:#cc7832;font-weight:bold;](null) color:#cc7832;font-weight:bold;](returncolor:#cc7832;](; color:#cc7832;]( color:#cc7832;font-weight:bold;](var pageName = item[color:#6a8759;]("title"]color:#cc7832;](; color:#cc7832;]( Navigator.color:#ffc66d;font-style:italic;](pop(context)color:#cc7832;](; color:#cc7832;]( Navigator.color:#ffc66d;font-style:italic;](pop(color:#cc7832;font-weight:bold;](this.color:#9876aa;](context)color:#cc7832;](; color:#cc7832;]( Navigator.color:#ffc66d;font-style:italic;](pushNamed(contextcolor:#cc7832;](, pageName)color:#cc7832;](; color:#cc7832;]( }color:#cc7832;](, color:#cc7832;]( )color:#cc7832;](; color:#cc7832;]( color:#cc7832;]( Widget color:#ffc66d;](_header() => color:#ffc66d;](UserAccountsDrawerHeader( currentAccountPicture: color:#ffc66d;](CircleAvatar( backgroundImage: color:#ffc66d;](AssetImage(ImagePath.color:#9876aa;font-style:italic;](nbImage)color:#cc7832;](, color:#cc7832;]( )color:#cc7832;](, color:#cc7832;]( accountName: color:#ffc66d;](Text(StringConst.color:#9876aa;font-style:italic;](DEVELOPER)color:#cc7832;](, color:#cc7832;]( accountEmail: color:#ffc66d;](Text(StringConst.color:#9876aa;font-style:italic;](DEV_EMAIL)color:#cc7832;](, color:#cc7832;]( )color:#cc7832;](; color:#cc7832;]( color:#cc7832;]( color:#bbb529;](@override color:#bbb529;]( Widget color:#ffc66d;](build(BuildContext context) { color:#cc7832;font-weight:bold;](var list = color:#ffc66d;](List()color:#cc7832;](; color:#cc7832;]( list.add(_header())color:#cc7832;](; color:#cc7832;]( color:#cc7832;font-weight:bold;](for (color:#cc7832;font-weight:bold;](var item color:#cc7832;font-weight:bold;](in ITEMS) { list.add(_item(contextcolor:#cc7832;](, item))color:#cc7832;](; color:#cc7832;]( } list.add(color:#ffc66d;](AboutMeTitle())color:#cc7832;](; color:#cc7832;]( color:#cc7832;font-weight:bold;](return color:#ffc66d;](Drawer( child: color:#ffc66d;](ListView( padding: EdgeInsets.color:#9876aa;font-style:italic;](zerocolor:#cc7832;](, color:#cc7832;]( children: listcolor:#cc7832;](, color:#cc7832;]( )color:#cc7832;](, color:#cc7832;]( )color:#cc7832;](; color:#cc7832;]( } } 3. Other we can the class Drawer above, but can write our widget instead of it, just the same as the other page;The whole project is : <a href="https://github.com/nb312/flutter_ui_appLet%27s">https://github.com/nb312/flutter_ui_appLet's</a> see the render for our code. ![](../../Uploads/e5a90881-daba-4af2-9fc8-e359672f3571.pngwidth="50%height="auto](</p>