my_animated_widgets

Flutter 3.x Dart 3.x Material 3 MIT License pub version

A collection of beautiful, production-ready animated Flutter widgets.
Each widget is fully customisable, dark-mode aware, and ready to drop into any project.

Widgets at a Glance
Installation
Import
Widgets
File Structure
License

Widgets at a Glance

Widget	Class	Description
Plasma Globe	`PlasmaGlobeWidget`	Interactive plasma ball — arcs track your touch
Orbital Menu	`OrbitalActionMenu`	Radial FAB with orbit rings and sparkle particles
Sky Toggle	`SkyThemeToggle`	Day-to-night sky animated theme switch
Liquid Progress	`LiquidProgressBar`	Wavy liquid-fill progress indicator
Dark Mode Toggle	`DarkModeToggle`	Elastic sun/moon animated switch

Installation

Add the package to your pubspec.yaml:

dependencies:
  my_animated_widgets:
    path: ../   # local path — replace with pub.dev version when published

Then run:

flutter pub get

Import

Import every widget with a single line:

import 'package:my_animated_widgets/my_animated_widgets.dart';

Or import individual widgets selectively:

import 'package:my_animated_widgets/src/plasma_globe/plasma_globe_widget.dart';
import 'package:my_animated_widgets/src/orbital_action_menu/orbital_action_menu.dart';
import 'package:my_animated_widgets/src/sky_theme_toggle/sky_theme_toggle.dart';
import 'package:my_animated_widgets/src/liquid_progress_bar/liquid_progress_bar.dart';
import 'package:my_animated_widgets/src/dark_mode_toggle/dark_mode_toggle.dart';

Widgets

⚡ PlasmaGlobeWidget

An interactive plasma globe that renders animated electric arcs.
When the user touches or drags inside the globe, the nearest arc bends toward
the finger and a bright lightning fork branches off it.

Basic usage

PlasmaGlobeWidget(
  radius: 150,
  primaryColor: Color(0xFF8B5CF6),
  secondaryColor: Color(0xFF06B6D4),
)

Full example

PlasmaGlobeWidget(
  radius: 150,
  primaryColor: Color(0xFF8B5CF6),  // arc / orb colour
  secondaryColor: Color(0xFF06B6D4), // secondary arc colour
  arcCount: 10,                      // number of background arcs
)

Parameters

Parameter	Type	Default	Description
`radius`	`double`	`150`	Globe radius in logical pixels
`primaryColor`	`Color`	`Color(0xFF8B5CF6)`	Primary arc and orb colour
`secondaryColor`	`Color`	`Color(0xFF06B6D4)`	Secondary arc colour
`arcCount`	`int`	`10`	Number of background plasma arcs

Internal classes

Class	File	Role
`PlasmaGlobeWidget`	`plasma_globe_widget.dart`	StatefulWidget entry point
`PlasmaPainter`	`plasma_painter.dart`	CustomPainter — renders all layers
`ArcData`	`arc_data.dart`	Immutable arc data model

🌌 OrbitalActionMenu

A circular FAB that expands into a ring of action buttons with animated orbit
rings, twinkling sparkle particles, and a shockwave burst on open.

Basic usage

OrbitalActionMenu(
  icon: Icons.auto_awesome,
  color: Color(0xFF7C4DFF),
  actions: [
    OrbitalAction(
      icon: Icons.receipt_long,
      label: 'Invoice',
      color: Color(0xFF00BCD4),
      onTap: () {},
    ),
    OrbitalAction(
      icon: Icons.person_add,
      label: 'Client',
      color: Color(0xFF69F0AE),
      onTap: () {},
    ),
  ],
)

Full example

OrbitalActionMenu(
  icon: Icons.auto_awesome,
  color: Color(0xFF7C4DFF),
  orbitRadius: 110,    // distance from centre to action buttons
  buttonSize: 64,      // centre button diameter
  actions: [
    OrbitalAction(icon: Icons.receipt_long,   label: 'Invoice', color: Color(0xFF00BCD4), onTap: () {}),
    OrbitalAction(icon: Icons.person_add,     label: 'Client',  color: Color(0xFF69F0AE), onTap: () {}),
    OrbitalAction(icon: Icons.qr_code_scanner,label: 'Scan',    color: Color(0xFFFFD740), onTap: () {}),
    OrbitalAction(icon: Icons.bar_chart,      label: 'Reports', color: Color(0xFFFF6D9F), onTap: () {}),
  ],
)

Parameters — `OrbitalActionMenu`

Parameter	Type	Default	Description
`icon`	`IconData`	required	Icon shown on the centre button
`color`	`Color`	required	Accent colour for the button and orbit rings
`actions`	`List<OrbitalAction>`	required	List of action items
`orbitRadius`	`double`	`110`	Distance (px) from centre to action buttons
`buttonSize`	`double`	`64`	Diameter of the centre FAB

Parameters — `OrbitalAction`

Parameter	Type	Default	Description
`icon`	`IconData`	required	Bubble icon
`label`	`String`	required	Text shown below the bubble
`color`	`Color`	required	Bubble accent colour
`onTap`	`VoidCallback?`	`null`	Callback when the bubble is tapped

Internal classes

Class	File	Role
`OrbitalActionMenu`	`orbital_action_menu.dart`	StatefulWidget — animation controllers
`OrbitalAction`	`orbital_action.dart`	Data model for each action item
`OrbitalBubble`	`orbital_bubble.dart`	Individual action bubble widget
`OrbitPainter`	`orbit_painter.dart`	CustomPainter — rings, dots, sparkles
`Particle`	`particle.dart`	Sparkle particle data model

🌗 SkyThemeToggle

A rich animated toggle that transitions between a sunny daytime sky and a
starry night sky. Features a rotating sun with 16 rays, a crescent moon
with crater texture, drifting clouds, twinkling stars, and a shooting star
that fires every few seconds.

Basic usage

SkyThemeToggle(
  isDark: _isDark,
  onChanged: (val) => setState(() => _isDark = val),
)

Full example

SkyThemeToggle(
  isDark: _isDark,
  onChanged: (val) => setState(() => _isDark = val),
  width: 220,   // pill width (height = 42% of width, auto-calculated)
)

Parameters

Parameter	Type	Default	Description
`isDark`	`bool`	required	Current dark-mode state
`onChanged`	`ValueChanged<bool>`	required	Callback when toggled
`width`	`double`	`200`	Width of the toggle pill in logical pixels

Animation controllers (internal)

Controller	Purpose
`_slideCtrl`	Knob position (elastic out curve)
`_raysCtrl`	Continuous sun ray rotation
`_twinkleCtrl`	Star brightness pulse
`_cloudCtrl`	Cloud horizontal drift
`_shootCtrl`	Shooting star sweep (fires every 4 s)
`_pressCtrl`	Press scale feedback

Internal classes

Class	File	Role
`SkyThemeToggle`	`sky_theme_toggle.dart`	StatefulWidget entry point
`SkyPainter`	`sky_painter.dart`	CustomPainter — all sky layers
`Star`	`star.dart`	Immutable star data model

⏳ LiquidProgressBar

A smooth animated progress bar with a wavy liquid fill and a percentage
label that sits inside the liquid. The wave animates continuously, and the
fill level transitions with an ease-out curve when progress changes.

Basic usage

LiquidProgressBar(
  progress: 0.65,   // 0.0 → 1.0
)

Full example

LiquidProgressBar(
  progress: 0.65,
  color: Color(0xFF01696F),
  height: 28,
)

Parameters

Parameter	Type	Default	Description
`progress`	`double`	required	Fill level from `0.0` (empty) to `1.0` (full)
`color`	`Color`	`Color(0xFF01696F)`	Liquid and glow colour
`height`	`double`	`28`	Bar height in logical pixels

Internal classes

Class	File	Role
`LiquidProgressBar`	`liquid_progress_bar.dart`	StatefulWidget entry point
`WavePainter`	`wave_painter.dart`	CustomPainter — wave shape and text

🌙 DarkModeToggle

A compact animated toggle that slides a sun/moon emoji between light and
dark positions with an elastic spring curve and a gradient track that
transitions between sky-blue/yellow (light) and deep-navy (dark).

Basic usage

DarkModeToggle(
  isDark: _isDark,
  onChanged: (val) => setState(() => _isDark = val),
)

Full example

DarkModeToggle(
  isDark: _isDark,
  onChanged: (val) => setState(() => _isDark = val),
  animationDuration: Duration(milliseconds: 400),
)

Parameters

Parameter	Type	Default	Description
`isDark`	`bool`	required	Current dark-mode state
`onChanged`	`ValueChanged<bool>`	required	Callback when toggled
`animationDuration`	`Duration`	`Duration(milliseconds: 400)`	Slide + gradient transition speed

Internal classes

Class	File	Role
`DarkModeToggle`	`dark_mode_toggle.dart`	StatefulWidget entry point

File Structure

lib/
├── my_animated_widgets.dart          ← Single-import library entry point
└── src/
    ├── dark_mode_toggle/
    │   └── dark_mode_toggle.dart
    │
    ├── liquid_progress_bar/
    │   ├── liquid_progress_bar.dart
    │   ├── wave_painter.dart
    │   └── index.dart
    │
    ├── orbital_action_menu/
    │   ├── orbital_action_menu.dart
    │   ├── orbital_action.dart
    │   ├── orbital_bubble.dart
    │   ├── orbit_painter.dart
    │   ├── particle.dart
    │   └── index.dart
    │
    ├── plasma_globe/
    │   ├── plasma_globe_widget.dart
    │   ├── plasma_painter.dart
    │   ├── arc_data.dart
    │   └── index.dart
    │
    └── sky_theme_toggle/
        ├── sky_theme_toggle.dart
        ├── sky_painter.dart
        ├── star.dart
        ├── sky_toggle_example_app.dart
        └── index.dart

example/
└── lib/
    └── main.dart                     ← Interactive 5-tab showcase app

Example App

The example/ folder contains a full showcase app with 5 dedicated tabs —
one per widget — each with live interactive controls.

To run the example:

cd example
flutter run

my_animated_widgets

Table of Contents

Widgets at a Glance

Installation

Import

Widgets

⚡ PlasmaGlobeWidget

Basic usage

Full example

Parameters

Internal classes

🌌 OrbitalActionMenu

Basic usage

Full example

Parameters — `OrbitalActionMenu`

Parameters — `OrbitalAction`

Internal classes

🌗 SkyThemeToggle

Basic usage

Full example

Parameters

Animation controllers (internal)

Internal classes

⏳ LiquidProgressBar

Basic usage

Full example

Parameters

Internal classes

🌙 DarkModeToggle

Basic usage

Full example

Parameters

Internal classes

File Structure

Example App

License

Libraries

my_animated_widgets package

my_animated_widgets

Table of Contents

Widgets at a Glance

Installation

Import

Widgets

⚡ PlasmaGlobeWidget

Basic usage

Full example

Parameters

Internal classes

🌌 OrbitalActionMenu

Basic usage

Full example

Parameters — OrbitalActionMenu

Parameters — OrbitalAction

Internal classes

🌗 SkyThemeToggle

Basic usage

Full example

Parameters

Animation controllers (internal)

Internal classes

⏳ LiquidProgressBar

Basic usage

Full example

Parameters

Internal classes

🌙 DarkModeToggle

Basic usage

Full example

Parameters

Internal classes

File Structure

Example App

License

Libraries

my_animated_widgets package

Parameters — `OrbitalActionMenu`

Parameters — `OrbitalAction`