my_animated_widgets 0.0.4

A collection of beautiful, production-ready animated Flutter widgets — Plasma Globe, Orbital Action Menu, Sky Theme Toggle, Liquid Progress Bar, and Dark Mode Toggle. Each widget is fully customisable [...]

my_animated_widgets

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

---

---

Table of Contents

• Widgets at a Glance
• Installation
• Import
• Widgets
  • ⚡ PlasmaGlobeWidget
  • 🌌 OrbitalActionMenu
  • 🌗 SkyThemeToggle
  • ⏳ LiquidProgressBar
  • 🌙 DarkModeToggle
• 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

---

License

MIT © 2026 Ibraam Akram