Let's Code Flutter: Animations!
Let's Code

Let's Code Flutter: Animations!

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.


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!



Share Tweet Send
0 Comments
Loading...