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 : https://github.com/nb312/flutter_ui_appLet's see the render for our code. ![](../../Uploads/e5a90881-daba-4af2-9fc8-e359672f3571.pngwidth="50%height="auto](