Hi Friends,
Hope you are all well. In this post let’s talk about parenting animations. Or resizing the widget in a fancy way onscreen.. 
To learn the basics of flutter get my course – Click here.
Other flutter courses – here. (Affliate link)
This is a sequel to my previous posts on animations. If you haven’t read them yet I would kindly advise you to do so by following the below links.
Basics of Animation – Click here.
Delayed Animations – Click here.
Let’s begin.
A video screencast of this post.
First of all what’s a parenting animation ? And how does it look like ?
Wow, looks nice right ? So why is this called a parenting animation ? Well, if you notice this carefully, you’ll see that there are two animations happening at the same time. One is the box moving along the x axis, and the other is a resize happening in the height and width of one of the boxes.
Since the top box does two animations it’s a child right ? The movement along the x-axis is done by both the boxes, it’s the parent and the resize happens only in one of them, it’s child. So this is called a parenting animation.
Alright, now how are we going to bring this into our application ? Let’s get started on that.
Create a new app and open up main.dart file and add the below code.
|
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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
import 'package:flutter/material.dart'; import 'package:flutter/animation.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( home: new MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { Animation animation, childAnimation; AnimationController animationController; @override void initState() { super.initState(); animationController = AnimationController(duration: Duration(seconds: 4), vsync: this); animation = Tween(begin: -0.10, end: 0.0).animate(CurvedAnimation( parent: animationController, curve: Curves.easeIn)); childAnimation = Tween(begin: 20.0, end: 125.0).animate( CurvedAnimation( parent: animationController, curve: Curves.easeIn ) ); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; animationController.forward(); return AnimatedBuilder( animation: animationController, builder: (BuildContext context, Widget child) { return new Scaffold( body: new Align( alignment: Alignment.center, child: new Container( child: Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0), child: Center( child: AnimatedBuilder( animation: childAnimation, builder: (BuildContext context, Widget child) { return new Center( child: Container( padding: EdgeInsets.all(15.0), height: childAnimation.value * 2, width: childAnimation.value * 2, child: new ListView( children: <Widget>[ TextField( decoration: InputDecoration(hintText: 'Username') ), SizedBox( height: 15.0, ), TextField( decoration: InputDecoration(hintText: 'Password'), obscureText: true, ), SizedBox(height: 20.0), RaisedButton( child: Text('Login'), onPressed: () {}, color: Colors.lightBlue, elevation: 7.0, textColor: Colors.white, ), SizedBox(height: 20.0), Center( child: Text('Don\'t have an account?'), ), SizedBox(height: 20.0), OutlineButton( child: Text('Signup'), onPressed: () {}, color: Colors.lightGreen, textColor: Colors.green, highlightColor: Colors.green, borderSide: BorderSide( color: Colors.green, style: BorderStyle.solid, width: 2.0), ), ], ), )); }, ))), )), ); } ); } } |
Whoa, that’s too much code.. Alright, Let’s break this down.
|
1 2 3 4 5 6 7 8 9 |
animation = Tween(begin: -0.25, end: 0.0).animate(CurvedAnimation( parent: animationController, curve: Curves.easeIn)); childAnimation = Tween(begin: 20.0, end: 125.0).animate( CurvedAnimation( parent: animationController, curve: Curves.easeIn ) ); |
This snippet is the one where we define the animations right ? It just shows a couple of easeIn animations, but watch the Tweens. The parent animation tween defines the start and end values as -0.25 and 0.0. This is to move the element or in our case the login form along the x-axis from somewhere on the left to the centre.
The childAnimation tween defines the start and end values as 20.0 and 125.0. This defines the height and width of the form that’s about to be resized over a period of time. Let’s see how this goes later on.
Now regarding the actual animation. Look at this snippet
|
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 56 57 58 59 60 61 62 63 64 |
return AnimatedBuilder( animation: animationController, builder: (BuildContext context, Widget child) { return new Scaffold( body: new Align( alignment: Alignment.center, child: new Container( child: Transform( transform: Matrix4.translationValues( animation.value * width, 0.0, 0.0), child: Center( child: AnimatedBuilder( animation: childAnimation, builder: (BuildContext context, Widget child) { return new Center( child: Container( padding: EdgeInsets.all(15.0), height: childAnimation.value * 2, width: childAnimation.value * 2, child: new ListView( children: <Widget>[ TextField( decoration: InputDecoration(hintText: 'Username') ), SizedBox( height: 15.0, ), TextField( decoration: InputDecoration(hintText: 'Password'), obscureText: true, ), SizedBox(height: 20.0), RaisedButton( child: Text('Login'), onPressed: () {}, color: Colors.lightBlue, elevation: 7.0, textColor: Colors.white, ), SizedBox(height: 20.0), Center( child: Text('Don\'t have an account?'), ), SizedBox(height: 20.0), OutlineButton( child: Text('Signup'), onPressed: () {}, color: Colors.lightGreen, textColor: Colors.green, highlightColor: Colors.green, borderSide: BorderSide( color: Colors.green, style: BorderStyle.solid, width: 2.0), ), ], ), )); }, ))), )), ); |
This is the snippet that handles the form. Notice that we are using two different AnimatedBuilders, one for the movement and another for the resizing.
For moving it we are using Matrix4.translateValues() whereas for resizing we are simply placing a container and mapping its height and width values to the values from the childAnimation as it happens.
That’s it. As simple as that. Now try to run this code (preferrably on an app) and watch the effect as it happens before your eyes.
Nice right ?
Hope this helped you guys. If you found this helpful, kindly share it with someone and help them too.
Donate to keep this site alive – here.
(If you want to donate but can’t, it’s fine just subscribe to my youtube channel).
Join our flutter community – here.
Thanks for reading. Peace..
