Flutter animation example
Flutter Animated Drawer: 3D Side Menu
The default Drawer slides over your page. This one moves the page instead: it scales down, shifts right and turns slightly in perspective, revealing the menu underneath, so the user never loses sight of where they were. You can tap the menu button or drag from the left edge.
- 4.5 KB file
- 5 live inputs
- Flutter runtime
How this 3d drawer menu works
- Open progress drives the page's scale (1 to 0.8), x offset and a perspective squeeze on its right edge.
- Dragging sets progress directly; on release it springs to whichever side is closer.
- Menu items fade and slide in with a 50 ms stagger; tapping one fires "navigate".
Add it to your Flutter app
Install exodeui_flutter, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:exodeui_flutter/exodeui_flutter.dart';
// Add assets/flutter-animated-drawer.exode to pubspec.yaml (download it below).
class FlutterAnimatedDrawer extends StatefulWidget {
const FlutterAnimatedDrawer({super.key});
@override
State<FlutterAnimatedDrawer> createState() => _FlutterAnimatedDrawerState();
}
class _FlutterAnimatedDrawerState extends State<FlutterAnimatedDrawer> {
final _canvas = GlobalKey<ExodeUICanvasState>();
late final Future<String> _json = rootBundle.loadString('assets/flutter-animated-drawer.exode');
@override
Widget build(BuildContext context) {
return FutureBuilder<String>(
future: _json,
builder: (context, snap) => snap.hasData
? ExodeUICanvas(
key: _canvas,
artboardJson: snap.data!,
fit: 'Layout',
onReady: () { },
onTrigger: (name, _) {
// fires: 'navigate'
},
)
: const SizedBox.shrink(),
);
}
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
open | Boolean | false | — |
items | Text | Home,Discover,Saved,Messages,Settings | — |
accent | Text | #a855f7 | hex colour |
ink | Text | #faf5ff | hex colour |
bg | Text | #1e1033 | hex colour |
Events: navigate
More Flutter animations
Bouncing Bars LoaderFive bars bouncing in a travelling wave with squash and stretch, plus rotating status messages.Speed Dial FABA floating action button that rotates to close while three labelled actions spring out in sequence.Hero Product TransitionA list item whose image arcs into the detail header while a circular reveal uncovers the page.Wavy TypewriterA typewriter whose letters drop in with a bounce; words type, hold, delete and cycle.Parallax Scroll ListA scrolling list of cards whose images shift at a slower rate, with momentum and edge bounce.Onboarding PagerThree swipeable intro pages with morphing illustrations, a stretching dot indicator and a finishing button.
The same idea in other frameworks: React morphing hamburger menu · SwiftUI context menu pop