Implicitly Animated Widgets in Flutter

Simplifying animations in Flutter with Implicitly Animated Widgets

Deven Joshi
Oct 12, 2018 · 5 min read

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 in Flutter

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:

  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

Hero Animations in Flutter

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

AnimatedCrossFades in Flutter

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:

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

Some of my other articles

Flutter Community

Articles and Stories from the Flutter Community

Deven Joshi

Written by

Mobile Developer (Flutter + Android) | Technical Writer | Speaker | #Hack19 Winner | AAD graduate

Flutter Community

Articles and Stories from the Flutter Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade