Animated Search Field with Flutter

Ever thought about how to make your default AppBar more dynamic? Here's an inspiration for you!

The gist is pretty straight-forward:

• On your AppBar, within your Scaffold, add a toggle button on the actions parameter;

  • In my case, this is represented by an IconButton with a search Icon.

• The title parameter can receive any Widget. I've used a Stack to add the standard written title and a TextField to that parameter;

• Finally, I've created a stateful class to abstract the animation logic, which can be somewhat confusing at first, but it's very simple at the core:

  • I use a SizeTransition to expand and contract the widgets in a given orientation
  • I change this orientation to horizontal
  • The axis alignment tells Flutter in which direction to animate
  • Besides that, it's just a matter of declaring an Animation and an AnimationController

• The bool used to control the animation is given inverted to each one of the Stack's children. This makes sure only one is visible at a time.

And that's it! I hope this makes sense, if you have any questions I'm more than glad to help.