Flutter — Universal Drawer

Hamza Mateen
4 min readMar 27, 2022

How to build a universal drawer in Flutter?

We are aware of the usual drawer and endDrawer options in Scaffold allowing left and right drawers respectively. These drawers can be used to pack both information related to the user and access to further features. What if we need a drawer that stays on screen no matter how many screens are switched behind it? What if such a drawer or endDrawer is required so we may avoid rebuilding the same drawer on every screen? Well! There is a solution.

Initially, we will build a drawer on top of our application that will be available on every screen regardless of which screen it is. Next, navigation in that drawer will be handled as universal drawers require a different kind of handling for navigation.

Brace yourself! You are going to learn some really exciting things ahead.

Start by creating a new Flutter project either via command prompt using flutter create universaldrawer or if you prefer Android Studio, use Android Studio’s create flutter project option.

Figure 1: Flutter project created via flutter create command

Now go to main.dart and remove comments to clean the file.

Create a new file, name it drawer.dart and create a stateless widget inside with the name MyDrawer.

Figure 2: MyDrawer stateless widget for universal drawer

Add a few widgets inside MyDrawer’s build() having some static information.

Figure 3: Sample information inside the drawer

Now we create new screens named ScreenA, ScreenB and ScreenC and then we go to MyHomePage to create navigations to them.

Figure 4: Creating different screens for navigation check

Add three widgets for navigation to screens A, B and C.

Hamza Mateen

Front-End Development Lead at MiFinity | All about Flutter Application Development & Life in Ireland. Flutter App Developer | Lecturer | Writer.