Flutter: Custom Drawer Navigation Tutorial

Drawer Closed | Drawer Opened | Drawer Demo

Shorticle

Hi folks! My project required a drawer with a custom animation. I’ve decided to develop my own solution to do this task. In this shorticle, I’ll show you how to do that in a quick way.

Basis

First of all, you’ll need to use the Stack widget to organize the Main page content and the Drawer content behind the scene.

So we have a Stack with two widgets:
- Drawer (with grey background)
- Main with scaffold

To observe both layers, let’s translate the Main page up to 75% right side without any other manipulation. This is 50% implementation of the drawer, easy right?

Simple translate | Bind to Animation Controller to achieve effects

Of course, that’s not enough you wanted to add more effects like scale, border radius, shadow, opacity, etc. They can be bind to a single animation controller. To apply such effects just use AnimatedBuilder.

Interaction

The GestureDetector widget is the best way to handle swipes horizontal or vertical even just a pan.