Flutter UI Essentials — Navigation drawer

Maneesha Erandi
2 min readOct 13, 2024

Navigation drawer is something really essential in mobile app development. Most of the time, a drawer will be the center of all the main navigation to important screens.

Material Navigation Drawer

Material Navigation Drawer gives a great look with new designs to our apps.

Material Navigation Drawer:

Use standard navigation drawers in expanded, large, and extra large window sizes

Use modal navigation drawers in compact and medium window sizes

Can be open or closed by default

Two types: standard and modal

Put the most frequent destinations at the top and group related destinations together

Whats defferent in M3?

  • New dynamic color mappings
  • Standard and Modal types as two separate types
  • Rounded corner edges
  • Updated indicators with different colors and shapes

Flutter Navigation Drawer

Constructors

This will create a Material Design Navigation Drawer.

NavigationDrawer({
Key? key,
required List<Widget> children,
Color? backgroundColor,
Color? shadowColor,
Color…

--

--