In this tutorial, I am going to show you how to use AnimatedAlign widget in Flutter.
Sometimes you may need to change the alignment of a widget. During the transition to the new alignment, adding an animation can make the transition smoother. In Flutter, creating such animation can be done easily thanks to AnimatedAlign widget. The usage examples of the widget can be found in this tutorial.
Using AnimatedAlign Widget
This is the constructor you need to use.
const AnimatedAlign({
Key key,
@required this.alignment,
this.child,
this.heightFactor,
this.widthFactor,
Curve curve = Curves.linear,
@required Duration duration,
VoidCallback onEnd,
})There are two named arguments that must be passed. The first one is alignment whose type is AlignmentGeometry. It's the alignment to be applied to the child. If the value changes, Flutter will animate the widget to the new alignment. The other required argument is duration which is used to control the duration of the animation.
The value for alignment is usually stored as a state variable. You can use predefined constants which are topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter, and bottomRight. You can also use a custom value by using the below constructor
const Alignment(this.x, this.y)x and y represent the distance fraction in horizontal (x-axis) and vertical (y-axis) direction respectively. Both arguments must not be null. For the x-axis, a value of -1.0 corresponds to the leftmost edge, while a value of 1.0 corresponds to the rightmost edge. For the y-axis, a value of -1.0 corresponds to the topmost edge, while a value of 1.0 corresponds to the bottommost edge. For example, Alignment(-0.5, 0.5) means the x-axis alignment is halfway between the leftmost edge and the center and the y-axis alignment is halfway between the topmost edge and the center.
Below is an example where the value of alignment depends on a state variable. There is a button used to change the alignment value, so that we can see how the animation is played. The duration is set to 3 seconds.
class _AnimatedAlignExampleState extends State<_AnimatedAlignExample> {
AlignmentGeometry _alignment = Alignment.topLeft;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Woolha.com Flutter Tutorial'),
),
body: Center(
child: Column(
children: [
Container(
width: 200,
height: 200,
color: Color.fromARGB(100, 200, 200, 200),
child: AnimatedAlign(
alignment: _alignment,
duration: Duration(seconds: 3),
child: Container(
color: Colors.teal,
child: const Text('Woolha.com', style: TextStyle(color: Colors.white)),
),
),
),
TextButton(
child: const Text('Change Alignment'),
onPressed: () {
setState(() {
_alignment = _alignment == Alignment.topLeft
? Alignment.bottomRight
: _alignment = Alignment.topLeft;
});
},
),
],
),
),
);
}
}Output:
Set Animation Curve
The default animation curve is linear. You can change it by passing curve argument.
AnimatedAlign(
alignment: _alignment,
duration: Duration(seconds: 3),
curve: Curves.bounceInOut,
child: Container(
color: Colors.teal,
child: const Text('Woolha.com', style: TextStyle(color: Colors.white)),
),
),
)Output:
Set onEnd Callback
If you need to do something when the animation ends, you can pass onEnd callback.
AnimatedAlign(
alignment: _alignment,
duration: Duration(seconds: 3),
onEnd: () {
print('Animation ends');
},
child: Container(
color: Colors.teal,
child: const Text('Woolha.com', style: TextStyle(color: Colors.white)),
),
),
)AnimatedAlign Parameters
Key key: The widget's key.AlignmentGeometry alignment*: How to align the child.Widget child: The widget under this widget in tree whose alignment is animated when it changes.double heightFactor: If non-null, sets its height to the child's height multiplied by this factor.double widthFactor: If non-null, sets its width to the child's width multiplied by this factor.Curve curve: The animation curve. Defaults toCurve.linear.Duration duration*: Duration of the animation.VoidCallback onEnd: A callback to be called when the animation ends.
*: required
Full Code
class _AnimatedAlignExampleState extends State<_AnimatedAlignExample> {
AlignmentGeometry _alignment = Alignment.topLeft;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Woolha.com Flutter Tutorial'),
),
body: Center(
child: Column(
children: [
Container(
width: 200,
height: 200,
color: Color.fromARGB(100, 200, 200, 200),
child: AnimatedAlign(
alignment: _alignment,
duration: Duration(seconds: 3),
onEnd: () {
print('Animation ends');
},
child: Container(
color: Colors.teal,
child: const Text('Woolha.com', style: TextStyle(color: Colors.white)),
),
),
),
TextButton(
child: const Text('Change Alignment'),
onPressed: () {
setState(() {
_alignment = _alignment == Alignment.topLeft
? Alignment.bottomRight
: _alignment = Alignment.topLeft;
});
},
),
],
),
),
);
}
}Summary
That's how to use AnimatedAlign widget in Flutter. It can be used for creating animation when the alignment of a widget changes.
You can also read about:
Align: a widget used to set the alignment of its child.AnimatedCrossFade, a widget for creating fading effects when a widget is being replaced with another.AnimatedPadding, a widget for creating aniamation when the padding of a widget changes.AnimatedOpacity, a widget for creating aniamation when the opacity of a widget changes.AnimatedSwitcher, a widget for creating animation when switching between two widgets.AnimatedSize, a widget that animates its size to match the size of its child.AnimatedContainer, a widget that starts an animation when the value of a property changes.
