Let's Code Flutter: Animations!
Tags: flutter, dart, android
Published: 2021-03-09 23:06:08

---
title: Let's Code Flutter: Animations!
published: true
description: I'm jealous of the other app developers who just know how to make animations in Android. Luckily, Flutter is here to help me -- and you! -- make some beautiful animations that don't cause us headaches.
tags: flutter, dart, android
cover_image: https://www.gatling.xyz/content/images/2021/03/letscode_flutteranimations.gif
canonical_url: https://www.gatling.xyz/blog/2021/03/09/flutter-animations/
---

In Android, we can typically do very simple animations by setting `animateLayoutChanges` to true in the ViewGroup of our layout's XML. It's been my tried and true method for a long time now. Anything more advanced than maybe changes to how a Dialog or Activity is shown has caused headaches that ended up not being worth the trouble. 

Therefore I haven't done a lot with animations, and am envious of those who have accomplished more.

While sprucing up my job's Flutter app, I wanted to make an expandable/collapsable area to show and hide some content. The user would click a button, and it would drop down revealing more of the information that was peeking through.

That's when I discovered the simplicity of Flutter animations.

Maybe it's like this in Android, too, and I've just been woefully ignorant of them. I know there's something about a ValueAnimator, but... eh, it's not as simple as *this!*

```dart
Widget _buildCollapsableWidget() {
		var expandedWidget = _makeExpandedWidget();
		var collapsedWidget = _makeCollapsedWidget();
    return Container(
      child: AnimatedCrossFade(
        alignment: Alignment.center,
        crossFadeState: _isExpanded ? CrossFadeState.showFirst : CrossFadeState.showSecond,
        duration: Duration(milliseconds: animationDuration),
        firstChild: expandedWidget,
        secondChild: collapsedWidget,
        sizeCurve: Curves.linearToEaseOut,
      ),
    );
  }
```

Using [AnimatedCrossFade](https://api.flutter.dev/flutter/widgets/AnimatedCrossFade-class.html), I have accomplished what I was looking for: a smooth open and close animation. And it's easily customizable!

When the user presses a button, I updated `_isExpanded`. I use a ValueNotifier for this (something else I learned about) but `setState` should work just as well. 

There's a *gajillion* different [Curves](https://api.flutter.dev/flutter/animation/Curves-class.html) to use; the one I have selected starts off in a very straight, then curves out to slow down towards the end of the animation. You can look at a video of the Curve [here](https://api.flutter.dev/flutter/animation/Curves/linearToEaseOut-constant.html). (Sidenote: I love the Flutter docs.)

That's... honestly it. It's super simple. I added a similar animation to the button the user presses, switching between an Up caret and a Down one, however for that I use an [AnimatedSwitcher](https://api.flutter.dev/flutter/widgets/AnimatedSwitcher-class.html).

```dart
// Other code here
return AnimatedSwitcher(
    duration: Duration(milliseconds: 600),
    transitionBuilder: (Widget child, Animation<double> animation) {
      return ScaleTransition(child: child, scale: animation);
    },
  child: _caretWidget,
  switchInCurve: Curves.bounceOut,
);
```

I'm trying to find more and more excuses to throw in an animation: they're so simple, and provide just a bit of extra polish. It makes the app feel a bit more alive and modern.

Flutter offers a ton of easy-to-use animated Widgets, as well as a bunch of ready-to-use Transitions. Above, I used the [ScaleTransition](https://api.flutter.dev/flutter/widgets/ScaleTransition-class.html), but there are ones for Size, Rotation, and even Position. The [AnimatedWidget](https://api.flutter.dev/flutter/widgets/AnimatedWidget-class.html) docs page provides details on these.

---

Have you had a chance to use Flutter animations yet? If so, what've you built with it? Show me what you've made and help inspire everyone!