Let's Code 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!

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, 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 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. (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.

// 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, but there are ones for Size, Rotation, and even Position. The AnimatedWidget 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!