Flutter Animated Series (Animated Align)
I received a lot of appreciation from the readers for my past stories that I posted on Medium on Flutter widgets. I wrote mostly on the most common commonly used widgets to build a Flutter app. If you have the basic knowledge of those widgets then it becomes easier for anyone to start building an amazing application in Futter.
Now Flutter has animations also, by using animated widgets you can create great fun-filled animations in your application.
What is Animated Align widget?
Animated Align widget automatically transitions its child’s from one position to another position over a given duration.
Let’s go over the constructor…
AnimatedAlign(
alignment: Alignment.right,
curve: Curves.easeInCirc,
heightFactor: 0.0,
widthFactor: 0.0,
duration: Duration(seconds: 3),
child:
),There isn't much in the constructor, other than 3 properties which are important that makes the whole animation work.
- alignment:- where initially the child widget is placed.
- curve:- there are 41 different types of options available.
- duration:- the time it will take for the alignment to change.
So what I am going to do is put a piece my code below and few gifs also showing how differently the curve property works. You will just have to arrange for the images yourself and it is not hard to find on the internet. What I have done is made a simple layout where the angry bird is trying to catch the pig and both are moving away from its position according to the curve property set when the start button is pressed.
class AnimatedAlignWidget extends StatefulWidget {
@override
_AnimatedAlignWidgetState createState() => _AnimatedAlignWidgetState();
}
class _AnimatedAlignWidgetState extends State<AnimatedAlignWidget> {
AlignmentGeometry _alignment = Alignment.topRight;
AlignmentGeometry _geometry = Alignment.bottomLeft;
void _changeAlignment() {
setState(() {
_alignment = _alignment == Alignment.topRight
? Alignment.bottomLeft
: Alignment.topRight;
_geometry = _alignment == Alignment.topRight
? Alignment.bottomLeft
: Alignment.topRight;
});
}
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/angryback.png'),
fit: BoxFit.cover,
),
),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 50, horizontal: 50),
child: Stack(
children: [
AnimatedAlign(
alignment: _alignment,
curve: Curves.easeInOutBack,
duration: Duration(seconds: 3),
child: Image.asset(
'images/redbird.png',
height: 75,
width: 75,
),
),
AnimatedAlign(
alignment: _geometry,
curve: Curves.easeInCirc,
duration: Duration(seconds: 3),
child: Image.asset(
'images/greenpig.png',
height: 75,
width: 75,
),
),
Center(
child: ElevatedButton(
style: ElevatedButton.styleFrom(primary: Colors.black),
onPressed: () => _changeAlignment(),
child: Text('START'),
),
)
],
),
),
);
}
}
This particular article is pretty short one than the ones I have written before but there wasn't much to write anyways. Only if I had combined it with other animated widgets would have been a long one, but I have started a series of animated widgets so I will be posting on each of it one by one. It will be short but with all the details that need to be there and also with working code to play around.
Leaving links below to my previous stories and my social connections. Keep reading, keep coding and keep enjoying. Stay safe and take care until next time…
Links to my previous stories SafeArea Widget, Expanded & Flexible, Container Widget, Row and Column, Stack & Positioned, Boxes Part-1, Boxes Part-2, TabBar & TabBarView, GridView, Buttons, Scaffold Widget.
You can follow me on … on Instagram, Twitter, Linkedin, Reddit.
