The AnimatedContainer widget in Flutter is a powerful tool for creating smooth and visually appealing animations. It is an animated version of the Container widget and provides various ways to animate changes in its properties, such as size, position, color, and more.
The AnimatedContainer widget works by automatically animating the changes in its properties over a specified duration using implicit animations. When the properties of the AnimatedContainer change, it compares the new values with the old ones and smoothly transitions between them, giving the impression of animation.
*Here's a breakdown of the key properties and methods of the AnimatedContainer widget:
1. duration:
Specifies the duration over which the animation should occur. It takes a Duration object.
2. curve:
Defines the animation curve, determining how the animation progresses over time. It takes a Curve object and has a default value of Curves.linear.
3. alignment:
Controls the alignment of the child within the container. It takes an AlignmentGeometry object and defaults to Alignment.center.
4. color:
Sets the background color of the container.
width and height: Determines the width and height of the container.
5. padding:
Specifies the padding inside the container.
6. margin:
Sets the margin around the container.
7. transform:
Applies a transformation matrix to the container.
8. setState:
Used to trigger changes in the properties of the AnimatedContainer and initiate the animation.
When you want to animate a change in any of the properties mentioned above, you would typically wrap the AnimatedContainer widget within a StatefulWidget and update the properties inside the setState method. Flutter will automatically animate the changes whenever the properties are updated.
Here's a simple example that demonstrates the usage of AnimatedContainer:
class MyAnimatedContainer extends StatefulWidget {
@override
_MyAnimatedContainerState createState()
=> _MyAnimatedContainerState();
}
class _MyAnimatedContainerState extends
State<MyAnimatedContainer> {
double _containerWidth = 100.0;
bool _isContainerExpanded = false;
void _toggleContainerSize() {
setState(() {
_containerWidth
= _isContainerExpanded ? 100.0 : 200.0;
_isContainerExpanded
= !_isContainerExpanded;
});
}
@override
Widget build(BuildContext
context) {
return GestureDetector(
onTap:
_toggleContainerSize,
child: Center(
child:
AnimatedContainer(
duration: Duration(seconds: 1),
width: _containerWidth,
height: 100.0,
color: Colors.blue,
curve: Curves.easeInOut,
),
),
);
}
}
In this example, the AnimatedContainer expands and contracts in width when tapped, transitioning smoothly between the two widths. The animation is triggered by updating the _containerWidth property within the setState method.
Remember to use the AnimatedContainer widget when you need to animate changes to properties such as size, position, or color. It provides a convenient and straightforward way to create visually engaging animations in your Flutter applications.
1. duration:
Specifies the duration over which the animation should occur. It takes a Duration object.
AnimatedContainer(
duration: Duration(seconds: 1),
// Other properties...
)
2. curve:
Defines the animation curve, determining how the animation progresses over time. It takes a Curve object and has a default value of Curves.linear.
AnimatedContainer(
curve: Curves.easeInOut,
// Other properties...
)
3. alignment:
Controls the alignment of the child within the container. It takes an AlignmentGeometry object and defaults to Alignment.center.
AnimatedContainer(
alignment: Alignment.topRight,
// Other properties...
)
4. color:
Sets the background color of the container.
AnimatedContainer(
color: Colors.blue,
// Other properties...
)
5. width:
Determines the width of the container.
AnimatedContainer(
width: 200.0,
// Other properties...
)
6. height:
Determines the height of the container.
AnimatedContainer(
height: 200.0,
// Other properties...
)
7. padding:
Specifies the padding inside the container.
AnimatedContainer(
padding: EdgeInsets.all(16.0),
// Other properties...
)
8. margin:
Sets the margin around the container.
AnimatedContainer(
margin: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
// Other properties...
)
9. decoration:
Applies a decoration to the container. You can use BoxDecoration to customize the appearance.
AnimatedContainer(
decoration:
BoxDecoration(
borderRadius:
BorderRadius.circular(8.0),
color: Colors.blue,
),
// Other properties...
)
10. transform:
Applies a transformation matrix to the container. You can use Matrix4 to define the transformation.
AnimatedContainer(
transform: Matrix4.rotationZ(0.5),
// Other properties...
)
11. constraints:
Defines additional constraints for the container, such as minimum and maximum width/height.
AnimatedContainer(
constraints: BoxConstraints(
minWidth: 100.0,
minHeight: 100.0,
maxWidth: 300.0,
maxHeight: 300.0,
),
// Other properties...
)
12. child:
The child widget placed inside the container.
AnimatedContainer(
child: Text('Hello'),
// Other properties...
)
These properties can be used together to create dynamic and visually appealing animations. Remember to wrap the AnimatedContainer widget within a StatefulWidget and update the desired properties inside the setState method to trigger the animations.
*Here are examples of how you can use each property of the AnimatedContainer widget to create different animations:
Example 1 :
import 'package:flutter/material.dart';
import 'dart:math';
class AnimatedCard extends StatefulWidget {
@override
_AnimatedCardState createState() => _AnimatedCardState();
}
class _AnimatedCardState extends State<AnimatedCard>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
bool _isFront = true;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 500),
);
_animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void _flipCard() {
if (_isFront) {
_controller.forward();
setState(() {
});
} else {
setState(() {
});
_controller.reverse();
}
_isFront = !_isFront;
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: _flipCard,
child: Center(
child: AnimatedBuilder(
animation:
_animation,
builder: (
BuildContext context, child) {
final double value
= _animation.value;
final double perspective = 0.003;
final double angle
= value *
0.5 * 3.141592653589793;
final double sinValue
= sin(angle);
final double cosValue = cos(angle);
final double scaleValue = 1.0 - value * 0.3;
final double frontOpacity = 1.0 - value;
final double backOpacity = value;
return Transform(
transform: Matrix4.identity()
..setEntry(3, 2, perspective)
..rotateY(angle),
alignment: Alignment.center,
child: Stack(
children: [
Opacity(
opacity: frontOpacity,
child: Container(
width: 200,
height: 300,
decoration:
BoxDecoration(
color: Colors.blue,
borderRadius:
BorderRadius.circular(12),
),
child: Center(
child: Text(
'Front',
style: TextStyle(
fontSize: 24,
color: Colors.white,
),
),
),
),
),
Opacity(
opacity: backOpacity,
child: Transform(
alignment:
Alignment.center,
transform: Matrix4.identity()
..setEntry(
3, 2, perspective)
..rotateY(
angle + 3.141592653589793),
child:
Container(
width: 200,
height: 300,
decoration:
BoxDecoration(
color: Colors.red,
borderRadius:
BorderRadius.circular(12),
),
child: Center(
child: Text(
'Back',
style: TextStyle(
fontSize: 24,
color: Colors.white,
),
),
),
),
),
),
],
),
);
},
),
),
);
}
}
Example 2 :
class AnimatedCard2 extends StatefulWidget {
import 'package:flutter/material.dart';
import 'dart:math';
@override
_AnimatedCardState2 createState()
=> _AnimatedCardState2();
}
class _AnimatedCardState2
extends State<AnimatedCard2>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
bool _isFront = true;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration:
Duration(milliseconds: 500),
);
_animation =
Tween<double>(begin:
0.0, end: 0.5).animate(
_controller);
}
@override
void dispose() {
_controller
.dispose();
super.dispose();
}
void _flipCard() {
if (_isFront) {
_controller.forward();
setState(() {
});
} else {
_controller.reverse();
setState(() {
});
}
_isFront = !_isFront;
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: _flipCard,
child: Center(
child:
AnimatedSwitcher(
duration:
Duration(milliseconds: 500),
transitionBuilder: (child, animation) {
return
RotationTransition(
turns: animation,
child: child,
);
},
child: _isFront
? _buildCard('Front', Colors.blue)
: _buildCard('Back', Colors.red),
),
),
);
}
Widget _buildCard(String text, Color color) {
return Container(
key: ValueKey(text),
width: 200,
height: 300,
decoration: BoxDecoration(
color: color,
borderRadius:
BorderRadius.circular(12),
),
child: Center(
child: Text(
text,
style: TextStyle(
fontSize: 24,
color: Colors.white,
),
),
),
);
}
}
** In conclusion, the AnimatedContainer widget in Flutter is a powerful tool for creating animated UI components. It allows you to easily animate changes in various properties such as width, height, color, padding, margin, alignment, decoration, transform, constraints, and child.
Here are the key points to remember about the AnimatedContainer widget:
*It provides a convenient way to animate multiple properties of a container widget.
*The duration property allows you to control the duration of the animation.
*The curve property enables you to apply different animation curves for different effects.
*You can animate changes in properties like width, height, color, padding, margin, alignment, decoration, transform, constraints, and child.
*The animation occurs smoothly and automatically when the properties are updated.
*The AnimatedContainer widget automatically transitions between the old and new property values.
*It is efficient and performs well, optimizing animations to reduce unnecessary rebuilds.
By leveraging the AnimatedContainer widget, you can easily create visually appealing and interactive animations in your Flutter applications. Its simplicity and flexibility make it a valuable tool for adding dynamic and engaging user experiences to your app's UI.
Thank-you For Your Support
- Nachiketa Pandey
0 Comments