Implicitly Animated Widgets in Flutter
Simplifying animations in Flutter with Implicitly Animated Widgets
Animations are quite easy to do in Flutter and a lot of complexity can be achieved with a lot less effort than native Android. This is usually achieved through ways like defining an Animation + an AnimationController. But there are inbuilt widgets which even reduce this and make animations as easy as simply changing values!
The complete examples will be hosted on my Github page given at the end of this article.
AnimatedContainer
An AnimatedContainer automatically transitions to the values defined (colors, sizes etc.) instead of just instantaneously changing to them. The GIF given above is an example of an AnimatedContainer.
An AnimatedContainer is defined as:
var myColor = Colors.blue;
var myHeight = 100.0;
var myWidth = 100.0;AnimatedContainer(
duration: Duration(seconds: 1),
color: myColor,
height: myHeight,
width: myWidth,
),
In normal cases, you would define a controller and a Tween<double> and a ColorTween to achieve the animation in the GIF above. But with AnimatedContainer, all you have to do is:
- Set a duration for the animation
duration: Duration(seconds: 1),2. Change values (Change color and size to your values)
myColor = Colors.green;
myHeight = MediaQuery.of(context).size.height;
myWidth = MediaQuery.of(context).size.width;3. SetState()
setState(() {});No controllers. No Tweens.
The moment you change the values of myColor, my Height or myWidth and setState(), the container automatically transitions to the values instead of changing directly to that value.
onPressed: () {
myColor = Colors.green;
myHeight = MediaQuery.of(context).size.height;
myWidth = MediaQuery.of(context).size.width;
setState(() {});
}At the beginning, myColor was set to Colors.blue. When we change it to Colors.green and setState to rebuild it, it transitions from blue to green without any Tweens used. (Note: Tweens are used implicitly but do not need to be user defined.)
From what I’ve seen, a lot of developers don’t seem to be aware of these implicitly animated widgets and waste time when it’s not necessary. Obviously there will be cases where you might want a different kind of behaviour, but most times, AnimatedContainer does the job.
Hero Animations
A Hero animation makes an element from one page “fly” to the second and automatically adjust to the size of the same element on the second page. This makes something like a list in an app which has a detail page that much more interesting.
Flutter makes it incredibly easy to implement Hero animations. All you have to do is wrap the element you want to make a ‘Hero’ with a Hero widget and supply to it a tag. If you want to do this in a list, you need to supply a different tag for each element, which I just usually set to “hero” + position of element in the list.
The above example has a simple card on the first page with a container with a red color.
Hero(
tag: "heroTag",
child: Container(
color: Colors.red,
height: 100.0,
),
),On the detail page, again there is a bigger container with a red color as well.
Expanded(
child: Hero(
tag: "heroTag",
child: Container(
color: Colors.red,
),
),
),And once I push it from one page to the other using
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return new HeroDetailPage();
},
),
);That’s it!
The colored container automatically flies and expands to the latter’s size.
A while ago, I used a lot of animations in a concept chess app I created with Flutter.
Here is an article I wrote if you want a more detailed look at the code of this app.
AnimatedCrossFade
A CrossFade is a smooth transition from one widget to another with a given duration. Flutter makes this easy using a AnimatedCrossFade widget.
This is how an AnimatedCrossFade is defined:
AnimatedCrossFade(
firstChild: // Your first element here,
secondChild: // Element after transition,
crossFadeState: // State of the transition,
duration: Duration(milliseconds: 1500),
),We supply:
- The widget before transition
firstChild: Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: CircularProgressIndicator(),
),
height: 200.0,
width: 200.0,
),2. The widget after transition
secondChild: Container(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: FlutterLogo(),
),
height: 100.0,
width: 200.0,
),3. The state of transition (If the transition has happened already or not)
(Here, firstStateEnabled is a boolean we can change to change the state.)
crossFadeState: firstStateEnabled
? CrossFadeState.showFirst
: CrossFadeState.showSecond,4. The duration of the transition
duration: Duration(milliseconds: 1500),This amount of code is enough to give us the above example. The transition is simply triggered by changing the crossFadeState.
Note: If the two children are of different sizes then it automatically transitions from one size to the other.
Here’s a demo:
AnimatedOpacity
AnimatedOpacity animates changes in opacity, i.e. how visible a widget is. An opacity of 0 makes a widget completely transparent, while a 1 opacity is fully visible.
AnimatedOpacity is declared as:
AnimatedOpacity(
opacity: // Your variable holding opacity value,
duration: // Duration of the transition,
child: FlutterLogo(),
)Staying similar to the last few widgets, in AnimatedOpacity, you change the opacity and setState and it automatically animates the opacity change.
In the above example, it is declared as
AnimatedOpacity(
child: FlutterLogo(size: 100.0,),
opacity: myOpacity,
duration: Duration(seconds: 1),
),When the button is clicked, it simply changes opacity and sets state.
onPressed: () {
myOpacity = 0.0;
setState(() {});
},That’s it for this article! I hope you enjoyed it and leave a few claps if you did. Follow me for more Flutter articles and comment for any feedback you might have about this article.
Github link for samples in this article: https://github.com/deven98/AnimatedWidgetsFlutter
