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.

DragStart event informs you when and where the drag started.
DragUpdate event informs where finger moving on the screen.
DragEnd updates you when drag is finished.
DragCancel informs you when drag was canceled/interrupted n some way.

You can learn more there:

Flutter. GestureDetector in-depth

On the “drag start”, you’ll need to capture the start position, next is to get updates on the “drag update” and compare the…