DEV Community


Animated Search Field with Flutter

Breno Teodoro
Programmer in ❤️ with Flutter! Google fan-boy and Instagrammer whenever I feel like it
・1 min read

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.

Discussion (0)