CODEWITHSUNDEEP
animationdartflutter
Rémi Rousselet
Rémi Rousselet

Reputation: 277027

How to do a scale open animation in Flutter?

I'm trying to do this animation in flutter :

https://material.io/guidelines/motion/choreography.html#choreography-creation

enter image description here

My problem is that I have absolutely no idea how to do that. As far as I know, widgets in flutter don't know their position nor the position or other widgets at all. And you can't access context.size inside the build method.

I tried to use Hero animation to do it. Or ScaleTransition. But it's definitely not working.

Upvotes: 3

Views: 2380

Answers (2)

Andrii Turkovskyi
Andrii Turkovskyi

Reputation: 29438

If I understand you correct - you want to show square widget, and animation is not suitable at most because widget doesn't know its size. In this case you can try MediaQuery.of(context).size.width - it returns width of your screen, so you can use it for calculating widgets size

Upvotes: 1

Collin Jackson
Collin Jackson

Reputation: 116728

You can use showMenu to dynamically show a popup menu at a given location. Consider using PopupMenuButton, which is an IconButton that automatically shows a menu when it is tapped. There's an example in the Gallery. If showMenu doesn't do what you want, you can copy the code in popup_menu.dart and customize it to make your own version. It uses CustomSingleChildLayout and PopupRoute.

If you just want to absolutely position a Material or Card on top of other elements, you can give it some elevation and use a Positioned within a Stack. You can use an AnimatedSize to adjust the element's size with a Curve. This won't interact with the back button on Android automatically, so if you want that, you may have to use addLocalHistoryEntry or PopupRoute.

Upvotes: 5

Related Questions