A Flutter application showcasing a collection of beautiful, interactive animations. This project demonstrates various animation techniques and patterns that can be used in Flutter applications.
Animator Playground is a showcase app featuring 9 unique animations, each with its own style and purpose. From simple loading indicators to complex interactive animations, this project serves as both a demonstration and a learning resource for Flutter animation development.
- 9 unique, polished animations
- Smooth, performant animations built with Flutter
- Clean, modern UI design
- State management using BLoC pattern
- Cros
s-platform support (iOS, Android, Web)
A modern, animated menu icon that transforms into different states. Used on almost every website by now, simple but impressively animated it becomes a real eye-catcher.
menu.mp4
A calming loading animation. The best are always websites that do not need a loading status. If they do, here would be a calming one.
loading.mp4
An atmospheric animation featuring falling raindrops that shatter on the ground. The perfect time of day and the perfect weather to program in peace. The raindrops even shatter on the ground.
rainy_night.mp4
A customizable watch animation. Classic, noble, modern or playful? What do you want your favorite watch to look like?
watch.mp4
An interactive Pac-Man game animation. The classic arcade game is still a lot of fun. The ghosts are chasing you, but you can eat them.
A delightful mail sending animation. Surprise your visitors with a nice animation instead of a simple "request sent".
send_mail.mp4
A mesmerizing mathematical animation. If you are not yet fascinated by mathematics, you should be now at the latest. Wonderful what a small calculation brings forth.
pendulam_wave.mp4
A simple yet versatile rotating square animation. A simple animation that can be used in many ways. For example, to indicate that the page is loading.
rotating_squares.mp4
A cool slider animation for day and night mode switching.
day_nigh_slider.mp4
- Flutter SDK (>=2.16.2 <3.0.0)
- Dart SDK
- Android Studio / Xcode (for mobile development)
- VS Code or Android Studio (recommended IDE)
- Clone the repository:
git clone <repository-url>
cd animator_playground- Install dependencies:
flutter pub get- Run the app:
flutter run- iOS:
flutter run -d ios - Android:
flutter run -d android - Web:
flutter run -d chrome
- Framework: Flutter
- State Management: BLoC (flutter_bloc)
- Language: Dart
- UI: Material Design 3
flutter_bloc: ^8.1.1- State managementbloc: ^8.1.0- BLoC pattern implementationintl: ^0.18.0- Internationalization supportcupertino_icons: ^1.0.2- iOS-style icons
lib/
├── data/
│ └── animations_data.dart # Animation data and configurations
├── models/
│ └── animation_model.dart # Animation model definitions
├── screens/
│ ├── homepage.dart # Main home screen
│ └── animations/
│ ├── animations_page.dart # Animations list page
│ ├── day_night_slider/ # Day/Night slider animation
│ ├── loading/ # Loading animation
│ ├── menu_icon/ # Menu icon animation
│ ├── pacman/ # Pac-Man animation
│ ├── pendulam_wave/ # Pendulum wave animation
│ ├── rainy_night/ # Rainy night animation
│ ├── rotating_squares/ # Rotating squares animation
│ ├── send_mail/ # Send mail animation
│ └── watch/ # Watch animation
└── main.dart # App entry point
Each animation is self-contained in its own directory with all necessary components. The animations are defined in animations_data.dart with their titles, descriptions, and color schemes.
Contributions are welcome! If you'd like to add a new animation or improve existing ones, please feel free to submit a pull request.
This project is open source and available for learning and demonstration purposes.
Inspired by various animation showcases and designed to demonstrate Flutter's powerful animation capabilities.
Note: To add videos to this README, place them in a videos/ directory in the project root and ensure the filenames match the references above (e.g., menu.mp4, loading.mp4, etc.).