Skip to main content

Flutter animation example

Flutter Animated Toggle Switch: Day and Night

A dark mode switch is a chance for a little delight. Flip this toggle and the sun rolls across the track, turning into a moon with craters as it goes, while the sky changes from blue with clouds to night with twinkling stars. The knob stretches slightly mid-travel, which makes the motion feel springy.

  • 4.2 KB file
  • 4 live inputs
  • Flutter runtime
Live, try it

How this day night toggle works

  • Knob position is a spring; its width grows with speed, a small squash-and-stretch touch.
  • Sun and moon are the same circle, and a crescent mask slides in as progress passes halfway.
  • The "dark" input sets the state and "toggle" fires on every change.

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-toggle-switch.exode to pubspec.yaml (download it below).
class FlutterToggleSwitch extends StatefulWidget {
  const FlutterToggleSwitch({super.key});
  @override
  State<FlutterToggleSwitch> createState() => _FlutterToggleSwitchState();
}

class _FlutterToggleSwitchState extends State<FlutterToggleSwitch> {
  final _canvas = GlobalKey<ExodeUICanvasState>();
  late final Future<String> _json = rootBundle.loadString('assets/flutter-toggle-switch.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: 'toggle'
              },
            )
          : const SizedBox.shrink(),
    );
  }
}

Inputs

InputTypeDefaultRange
darkBooleanfalse—
accentText#38bdf8hex colour
accent2Text#1e1b4bhex colour
bgText#0b1020hex colour

Events: toggle

More Flutter animations