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.
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?
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.
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
Let’s find out the main concepts of GestureDetector widget in examples…
On the “drag start”, you’ll need to capture the start position, next is to get updates on the “drag update” and compare the…