Flutter AnimatedContainer animation usage analysis
Inscription
- Holding the sword in the world, starting from your accumulation, wherever you go, you must strive for perfection, that is, toss every day.
important news
AnimatedContainer can be understood as Container Animat, that is to say, a container with animation. Using AnimatedContainer can easily realize the animation effect of Widget.
As shown in the figure below, the picture is a square display effect by default. When the picture is clicked, the width and height of the picture transition from the original 100 to 200 pixels in 1 second, and become a circle.
The effect process shown in the figure above can be easily achieved through AnimatedContainer, the code is as follows:
///AnimatedContainer 的基本使用
class AnimatedContainerPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return ClipRectPageState();
}
}
class ClipRectPageState extends State {
///Click ID
bool click = false ;
@override
Widget build ( BuildContext context ) {
return Scaffold (
appBar : new AppBar (
title : Text ( "AnimatedContainer Basic Use" ) ,
) ,
body : Center (
/// gesture recognition
child : GestureDetector (
onTap : ( ) {
setState ( ( ) {
click = !click ;
} ) ;
} ,
///Animated container
child : AnimatedContainer (
///Animation interpolator
curve : Curves . bounceInOut ,
///The height of the container
height : click ? 200 : 100 ,
///The width of the container
width : click ? 200 : 100 ,
///Container decoration
decoration : BoxDecoration (
///Background image
image : DecorationImage (
///Load the image in the resource directory
image : AssetImage ( 'assets/images/2.0x/banner4.webp' ) ,
fit : BoxFit . cover ,
) ,
/// Rounded corners
borderRadius : BorderRadius . all ( Radius . circular (
click ? 200 : 0 ,
) ) ) ,
///transition time
duration : Duration (milliseconds: 15000),
),
),
),
);
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
Use in detail
AnimatedContainer (
//animation rate
curve : Curves . easeInBack ,
// callback for the end of animation execution
onEnd : ( ) { } ,
// child widget alignment
alignment : Alignment . center ,
width : 300 ,
// height
height : 200 ,
/ /background color // color
: Colors.deepPurple
, //
padding : EdgeInsets.all ( 0 ) ,
//complex decoration style
decoration : BoxDecoration (
//background color
color : Colors . red ,
// border rounded corners
borderRadius : BorderRadius . all ( Radius . circular ( 20 ) ) ,
// border
border : Border . all ( color : Colors .deepPurple , width : 1 ) , // linear gradient
gradient
: LinearGradient (
// start position
begin : Alignment ( 0 , 0 ) ,
// end position
end : Alignment ( 1 , 0 ) ,
// color group
colors : [
Colors . blue ,
Colors . deepOrange ,
Colors . orange ,
] ) ,
) ,
duration : Duration ( seconds : 2 ) ,
child : Text (
"Morning Young Man" ,
style : TextStyle ( color : Colors . white ) ,
) ,
)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
