Hi Friends,
Hope you are all well. In our past few posts we have been seeing about different type of animations right ? In this post let’s talk about bringing all these into our UI.
To learn the basics of flutter get my course – Click here.
Other flutter courses – here.
Before starting this I would highly recommend reading all the basic posts on animations.
Basics of Animation – Click here.
Delayed Animations – Click here.
Parenting Animations – Click here.
Transforming Animations – Click here.
Value Change Animations – Click here.
Let’s begin.
A screencast of this post:
We’ll start off with a combo of moving, masking animations in this post. In other words, we’ll be building something like this.
Cool right. So we have a simple card which upon tapping slides up smoothly to reveal a couple of action buttons (or any other content).
Let’ see how to build this. Create a new Flutter app and open main.dart file. Then paste the below code inside it.
|
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 |
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; AnimationController animationController; @override void initState() { super.initState(); animationController = AnimationController(duration: Duration(milliseconds: 500), vsync: this); animation = Tween(begin: 0.0, end: -0.15).animate( CurvedAnimation(parent: animationController, curve: Curves.ease)); } @override Widget build(BuildContext context) { final width = MediaQuery.of(context).size.width; return AnimatedBuilder( animation: animationController, builder: (BuildContext context, Widget child) { return new Scaffold( body: new Center( child: new Stack( children: <Widget>[ new Center( child: Container( padding: EdgeInsets.all(10.0), width: 350.0, height: 200.0, decoration: BoxDecoration( borderRadius: BorderRadius.circular(15.0)), child: new Row( crossAxisAlignment: CrossAxisAlignment.end, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RaisedButton( child: Text('Buy'), elevation: 7.0, color: Colors.blue, textColor: Colors.white, onPressed: () {}), SizedBox(width: 10.0), RaisedButton( child: Text('Details'), elevation: 7.0, color: Colors.blue, textColor: Colors.white, onPressed: () {}) ], ))), new Center( child: GestureDetector( child: Container( alignment: Alignment.bottomCenter, width: 350.0, height: 200.0, decoration: BoxDecoration( borderRadius: BorderRadius.circular(15.0), image: DecorationImage( image: AssetImage('assets/someimg.jpg'), fit: BoxFit.cover)), transform: Matrix4.translationValues( 0.0, animation.value * width, 0.0), ), onTap: () { animationController.forward(); }, onDoubleTap: () { animationController.reverse(); }, )) ], ), )); }); } } |
Whoa, that’s too much code. Let’s break this down.
|
1 2 |
animation = Tween(begin: 0.0, end: -0.15).animate( CurvedAnimation(parent: animationController, curve: Curves.ease)); |
As always this is the definition of the animation. We are simply defining a tween to the get the card to move on the screen.
Let’s talk about the actual UI widget.
|
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 |
return new Scaffold( body: new Center( child: new Stack( children: <Widget>[ new Center( child: Container( padding: EdgeInsets.all(10.0), width: 350.0, height: 200.0, decoration: BoxDecoration( borderRadius: BorderRadius.circular(15.0)), child: new Row( crossAxisAlignment: CrossAxisAlignment.end, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ RaisedButton( child: Text('Buy'), elevation: 7.0, color: Colors.blue, textColor: Colors.white, onPressed: () {}), SizedBox(width: 10.0), RaisedButton( child: Text('Details'), elevation: 7.0, color: Colors.blue, textColor: Colors.white, onPressed: () {}) ], ))), new Center( child: GestureDetector( child: Container( alignment: Alignment.bottomCenter, width: 350.0, height: 200.0, decoration: BoxDecoration( borderRadius: BorderRadius.circular(15.0), image: DecorationImage( image: AssetImage('assets/someimg.jpg'), fit: BoxFit.cover)), transform: Matrix4.translationValues( 0.0, animation.value * width, 0.0), ), onTap: () { animationController.forward(); }, onDoubleTap: () { animationController.reverse(); }, )) ], ), ) ); |
Let’s break this down.
- We are using a Stack so that we could stack the children one on top of the other.
- The bottom container contains the two buttons. This is the container that is hidden from view on initial load.
- The top container contains the image/product name/ad on which the user taps. So, in order to capture this gesture, I decided to use a gesture detector. (You could also use an Inkwell to get the nice splash effect). On Tapping, I am simply triggering the animation.
- The animation is nothing but a simple transform animation happening along the Y axis. i.e., I am moving the container a little bit towards the top thereby exposing the buttons beneath it. Cool right ? I am reversing this animation in a double Tap gesture as well.
Now run the app and see the effect on a mobile device.
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.. 
