Looking for a way to create beautiful Flutter animation with ease? Here’s a Flutter package that would give you beautiful effects in Flutter, and would surely add more life to your application.
Simple Animations is a powerful framework to create beautiful custom animations in no time.
- 💪 fully tested
- 📝 well documented
- 💼 enterprise-ready
🌞 Highlights
- Easily create custom animations in stateless widgets
- Animate multiple properties at once
- Create staggered animations within seconds
- Simplified working with AnimationController instances
- Designed with type-safety in mind
⛏️ Getting started
Add the dependency simple_animations: ^2.X.X (find recent version) to your project and start using it:
import 'package:simple_animations/simple_animations.dart';
🛈 If are upgrading from version 1.x.x read the migration guide.
🍱 Modules
Simple Animations constists of multiple modules that are provided by this Flutter package. You can also use them separately.
Overview
| Module | Description |
|---|---|
| 🚀 Stateless Animation | Widgets for super simple creating custom animations. |
| 🎭 MultiTween | Animate multiple properties at once or create staggered animations. |
| 🎥 Anicoto | Setup managed AnimationControllers instantly. |
Click on a module name to read it’s documentation and to see examples.
🛈 Note: These examples uses supercharged for syntactic sugar.
🚀 Stateless Animation
Stateless Animation provides your app with a powerful set of Flutter widgets that hide the most complex part of creating animations.
Example: Square with a animated, fading background color.
PlayAnimation<Color>( // <-- specify type of animated variable
tween: Colors.red.tweenTo(Colors.blue), // <-- define tween of colors
builder: (context, child, value) { // <-- builder function
return Container(
color: value, // <-- use animated value
width: 100,
height: 100
);
});
Read more about it or watch examples.
🎭 MultiTween
MultiTween gives is mighty tool thats enables you to tween multiple properties in a single Animatable or designing staggered animations.
Example: Custom tween with multiple properties.
enum AniProps { width, height, color } // <-- define properties
class MyWidget extends StatelessWidget {
final _tween = MultiTween<AniProps>() // <-- design tween
..add(AniProps.width, 0.0.tweenTo(400.0), 1000.milliseconds)
..add(AniProps.width, 400.0.tweenTo(300.0), 1000.milliseconds)
..add(AniProps.height, 500.0.tweenTo(200.0), 2000.milliseconds)
..add(AniProps.color, Colors.red.tweenTo(Colors.blue), 2.seconds);
@override
Widget build(BuildContext context) {
return ... // <-- use tween
}
}
Read more about it or watch examples.
🎥 Anicoto
Anicoto fully manages your AnimationController instances and handles initialization, configuration and disposing. No more boilerplate code.
Example: Animated stateful widget with full-fledged AnimationController instance.
class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
with AnimationMixin { // <-- add AnimationMixin to state class
Animation<double> size; // <-- declare animation variable
@override
void initState() {
size = 0.0.tweenTo(200.0).animatedBy(controller); // <-- connect tween and controller and apply to animation variable
controller.play(); // <-- start the animation playback
super.initState();
}
@override
Widget build(BuildContext context) {
return Container(
width: size.value, // <-- use animation variable's value here
height: size.value, // <-- use animation variable's value here
color: Colors.red
);
}
}
Read more about it or watch examples.
📈 Improve
Simple Animations will improve in future updates. Help me by reporting bugs, submit new ideas for features, or anything else that you want to share.
- Just write an issue on GitHub. ✏️
- And don’t forget to hit the like button for this package ✌️
Some Examples You’d Love to see;
TypeWriter
Example animates width of the box, text length and cursor.
Checkbox
Example of an animated custom checkbox.
Waves
Example of sine waves in front of an animated background gradient.
Widgets fade-in
Example of delayed fade-in of widgets.
Bubbles
Example of a bubble particle system.
Bar charts
Example of animated bar charts.
Particle explosion
Example of a particle explosion upon user interaction.
Loading animation
Example of a custom loading animation that waits for a http request.
