Flutter provides various ways to add animations to your app, making it more interactive and visually appealing. Here's a quick overview of how you can implement animations in Flutter:
1.
Implicit Animations
Implicit animations are the simplest to use, as Flutter handles the animation for you. These include widgets like AnimatedContainer, AnimatedOpacity, AnimatedPadding, etc. They automatically animate between values when they change.
class MyAnimatedWidget extends StatefulWidget {
@override
_MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}
class _MyAnimatedWidgetState extends State<MyAnimatedWidget> {
double _width = 100;
double _height = 100;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
_width = _width == 100 ? 200 : 100;
_height = _height == 100 ? 200 : 100;
});
},
child: AnimatedContainer(
width: _width,
height: _height,
color: Colors.blue,
duration: Duration(seconds: 1),
curve: Curves.easeInOut,
),
);
2.
Explicit Animations
For more control over animations, you can use explicit animations. These involve AnimationController, Animation, and various Tween classes.
class MyFadeTransition extends StatefulWidget {
@override
_MyFadeTransitionState createState() => _MyFadeTransitionState();
}
class _MyFadeTransitionState extends State<MyFadeTransition>
with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
);
_animation = CurvedAnimation(parent: _controller, curve: Curves.easeIn);
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return FadeTransition(
opacity: _animation,
child: Center(
child: Container(
width: 200,
height: 200,
color: Colors.blue,
),
),
);
}
}
3.
Hero Animations
Hero animations are used for transitions between two different screens. You simply wrap a widget in a Hero widget, and Flutter automatically animates the transition between screens.
// First Screen
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("First Screen")),
body: Center(
child: GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (_) {
return SecondScreen();
}));
},
child: Hero(
tag: 'hero-image',
child: Image.asset('assets/image.png'),
),
),
),
);
}
}
// Second Screen
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Second Screen")),
body: Center(
child: Hero(
tag: 'hero-image',
child: Image.asset('assets/image.png'),
),
),
);
}
}
4.
Custom Animations
For more complex scenarios, you might want to create custom animations by extending the ImplicitlyAnimatedWidget or using the TweenAnimationBuilder.
class MyCustomAnimation extends StatelessWidget {
@override
Widget build(BuildContext context) {
return TweenAnimationBuilder(
tween: ColorTween(begin: Colors.blue, end: Colors.red),
duration: Duration(seconds: 2),
builder: (context, Color color, child) {
return ColorFiltered(
colorFilter: ColorFilter.mode(color, BlendMode.modulate),
child: Image.asset('assets/image.png'),
);
},
);
}
}
- Animation Libraries You can also explore animation libraries like flutter_animator, rive, or flare_flutter for more advanced and pre-built animations.
Each of these approaches gives you the flexibility to add animations to your Flutter apps, enhancing user experience.
Top comments (0)