Animations are a crucial part of modern UI/UX design, allowing developers to create visually appealing and dynamic applications. Flutter provides a powerful and flexible framework for working with animations.
1. Basic Animation π
Basic animations involve animating a single property over time. Flutter's AnimationController
and Tween
classes are typically used for this purpose.
Copy AnimationController controller;
Animation<double> animation;
@override
void initState() {
super.initState();
controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
);
animation = Tween<double>(
begin: 0,
end: 300,
).animate(controller)
..addListener(() {
setState(() {});
});
controller.forward();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
2. Animated Widgets π‘
Flutter provides several animated widgets for common animations, like AnimatedOpacity
, AnimatedPositioned
, and AnimatedContainer
.
Copy AnimatedContainer(
duration: Duration(seconds: 2),
width: _isBig ? 200 : 100,
height: _isBig ? 200 : 100,
color: Colors.blue,
)
3. Custom Animations π¨
For more complex animations, you can create your own custom animated widgets.
Copy class FadeTransitionExample extends StatelessWidget {
final Animation<double> animation;
FadeTransitionExample(this.animation);
@override
Widget build(BuildContext context) {
return FadeTransition(
opacity: animation,
child: Container(width: 200, height: 200, color: Colors.blue),
);
}
}
Complete Example Code π
Here's a complete Flutter app example demonstrating a basic animation using AnimationController
and Tween
:
Code Result
Copy import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: BasicAnimationExample(),
);
}
}
class BasicAnimationExample extends StatefulWidget {
@override
State<BasicAnimationExample> createState() => _BasicAnimationExampleState();
}
class _BasicAnimationExampleState extends State<BasicAnimationExample>
with TickerProviderStateMixin {
AnimationController? controller;
Animation<double>? animation;
@override
void initState() {
super.initState();
controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
);
animation = Tween<double>(
begin: 0,
end: 300,
).animate(controller!)
..addListener(() {
setState(() {});
});
controller!.forward();
}
@override
void dispose() {
controller!.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Basic Animation Example'),
),
body: Center(
child: Container(
width: animation!.value,
height: animation!.value,
color: Colors.blue,
),
),
);
}
}
In this example:
We first create an AnimationController
and a Tween
object.
The Tween
object specifies the beginning and ending values for the animation.
We start the animation by calling controller.forward()
.
We use the addListener
method to rebuild our widget each time the animation value changes.
In the build
method, we create a Container
whose width and height are set to the current value of the animation, creating a growing square animation.
Assignments π
Last updated 11 months ago