Animated Search Field with Flutter

Breno Teodoro — Sat, 27 Jun 2020 21:34:46 +0000

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.

DEV Community: Breno Teodoro