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 yourScaffold
, add a toggle button on theactions
parameter;- In my case, this is represented by an
IconButton
with a search Icon.
- In my case, this is represented by an
The
title
parameter can receive any Widget. I've used aStack
to add the standard written title and aTextField
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 anAnimationController
- I use a
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.
Top comments (0)