Skip to main content

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
Live, try it

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

InputTypeDefaultRange
openBooleanfalse—
itemsTextHome,Discover,Saved,Messages,Settings—
accentText#a855f7hex colour
inkText#faf5ffhex colour
bgText#1e1033hex colour

Events: navigate

More Flutter animations

The same idea in other frameworks: React morphing hamburger menu · SwiftUI context menu pop