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 9 months ago