Flutter Button Animations Showcase 🚀

A curated collection of interactive, production-ready button animations built entirely with the Flutter SDK.

The focus of this project is on advanced animation techniques using AnimationController, CustomPainter, Matrix transforms, custom shaders, and physics-inspired motion—without relying on any third-party animation packages.

📱 Preview

Particle Storytelling	Typography That Tells a Story
Elemental Download Button	Morphing Share Button
Depth Illusion Buttons

---

🎯 Project Goals

• Showcase advanced Flutter animations and Flutter UI design.
• Explore micro-interactions and physics-driven motion.
• Learn and demonstrate complex Flutter animation examples in public.
• Build reusable, high-performance animation patterns for the community.

🎬 Current Episodes

This repository is structured as an ongoing series of "Episodes." Each episode focuses on a unique interaction design.

Episode 01: The Morphing Share Button

A highly kinetic share button demonstrating complex state choreography and gesture-driven interactions.

• The Morph: Shrinks from a pill into a central hub.
• The Bubble Break: 4 social platform bubbles slide out into an arc using easeOutBack spring physics.
• The Vacuum & Drop: Selecting an icon vacuums rejected bubbles back and drops the chosen icon into a checkmark morph.

Episode 02: Elemental Download Button

A physics-driven download button featuring fluid dynamics and CustomPainter rendering.

• The Elements: Three distinct physics themes—Water, Fire, and Toxic Sludge.
• The "Wetting" Border: A dynamic gradient shader instantly colorizes the container border exactly where the liquid touches it.
• Surface Reflection: A semi-transparent wet gloss trace travels along the highest peaks of the sine waves.
• Physical Feedback: Features non-linear download stuttering (TweenSequence), pressure expansion, and final settling inertia.

Episode 03: Typography That Tells a Story

A collection of "Action-Aware" typography components where the text animation physically explains the button's purpose.

• Meaningful Idle States: Each button breathes or pulses intuitively (Download's opacity wave, Submit's forward lean, Login's vault squeeze) to hint at its action before a tap.
• Physics-Driven Storytelling: Features a staggered slingshot shoot for Submit, a gravity data-drop for Download, and a 3D vault-door matrix fold for Login.
• 3-Phase Execution: Smoothly transitions through Start -> Process (e.g., Downloading...) -> Completion states.
• The Success Pulse: Uses micro-interactions like a 4% elasticOut scale bump upon completion for premium tactile feedback.

Episode 04: Particle Storytelling

A custom physics engine built entirely with CustomPainter to create meaningful particle transformations.

• Delete (Disintegration): The button compresses under tension, cracks, and violently shatters into 80 heavy geometric shards.
• Like (Chaos to Order): 120 particles explode randomly, hit a collision boundary, and algorithmically snap into a perfect Cardioid (Heart) curve.
• Upgrade (Energy Overload): A glowing aura draws 150 particles from deep space directly into the center of the button, triggering a blinding shockwave transformation.

Episode 05: Depth Illusion Buttons

A collection of buttons designed to feel like heavy, real-world physical objects using Z-axis depth and matrix transformations.

• Save (Slot Drop): A physical hatch retracts, revealing a deep Z-axis cavity inside the button. A solid bookmark falls from above, drops into the slot with gravity physics, and the hatch snaps shut to securely "save" it.
• Subscribe (Vault Door): A heavy vault door splits open asymmetrically, revealing a deep cavern. A subscription card physically zooms forward with a custom overshoot curve and an elastic avatar jiggle, mimicking Apple-level micro-polishes.
• Add to Cart (Perspective Flip): The entire button pivots aggressively in 3D space. A solid 3D box drops onto a rear platform, triggering a dynamic energy circuit to travel along the border to finalize the action.

Coming Soon

• Magnetic Hover Interactions
• Liquid Physics UI

---

🧠 What You Will Learn

This repository demonstrates practical Flutter motion design techniques such as:

• AnimationController orchestration
• Staggered animations
• CustomPainter and CustomClipper
• Matrix transforms and 3D effects
• TweenSequence for non-linear motion
• Physics-inspired motion (springs, inertia)
• Canvas drawing and Shaders
• Gesture-driven interactions

---

✨ Architecture & Performance

• Zero External Dependencies: Built strictly using the core Flutter SDK.
• Feature-First Structure: Animation logic, painters, widgets, and reusable components are separated for maintainability.
• Hardware Accelerated: Uses GPU-friendly transforms (Transform.translate, Transform.scale) where appropriate to keep animations efficient.

Repository Structure

lib/
 ├── core/              # Constants, colors, and themes
 ├── features/          # The Episodes (each isolated)
 │   ├── morphing_share_button/
 │   │   ├── animations/
 │   │   ├── widgets/
 │   │   └── screen/
 │   └── liquid_fill_button/
 ├── shared/            # Common widgets like the HomeScreen
 └── main.dart

---

🛠️ Built With

• Flutter & Dart
• AnimationController & CurvedAnimation
• CustomPainter & Canvas API
• TweenSequence

🚀 How to Run

1. Clone the repository:

   git clone https://github.com/shahtushar-dev/flutter_button_animations.git

2. Navigate to the directory:

   cd flutter_button_animations

3. Get the dependencies:

   flutter pub get

4. Run the app:

   flutter run

---

🤝 Contributing

Feel free to explore the source code, reuse ideas in your own projects, or contribute new animation concepts through pull requests. Whether you want to improve Flutter custom widgets, add new Flutter micro interactions, or optimize existing effects, all contributions are welcome!

---

Built with ❤️ for the Flutter Community.