Slide widgets off screen in flutter

Question

I currently have a Widget that has three elements -- two buttons and a text input. On text input focus I would like to slide the buttons off the screen and expand the text input to occupy the remaining width.

Are there any flutter components (animation or otherwise) I can use to slide components off screen and animate the text field expansion?

Solution

I ended up using an Animatable widget

https://flutter.io/docs/development/ui/animations/tutorial#simplifying-with-animatedwidget

And using a combination of a Stack() where I would animate offscreen elements to have negative offsets (via Positioned() children) based on the Animation and a TextField inside an Expanded()

edit

I don't have access to the computer with the source code anymore, but you should be able to infer how to construct such a widget from the Flutter example gallery https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/demo/material/drawer_demo.dart (this is how I was able to learn - specifically, look at the drawerdetails animation). I positioned the textfield and buttons in the same stack and animated the textfield size as well as the button position simultaneously

Comments

[Renan Coelho]

You just need to make use of SlideTransition widget