CODEWITHSUNDEEP
flutterflutter-layoutflutter-animation
Hashem Aboonajmi
Hashem Aboonajmi

Reputation: 13860

Animate layout transition from Row to Column

I have a row that by tapping on it, layout changes to the new one. I want to animate this layout transition. something you have seen a lot with hero animations. but hero is only for route transitions.

The target animation is very simple consist of size and position animations:

  1. Image sizes increase and positioned to left: 0 , top: 0, right: screenSize.width and height to for example 200.
  2. texts will move below the image
  3. description text will enlarge enough to fit all remaining texts.

the problem is initial parent widget is Row but final parent widget is Column. but how can I animate this Row to Column layout transition? all the flutter animation tutorials I have seen relates to changing size, opacity, transform animations, but none of them described this kind of transition. How can I achieve this below layout transition animation?

enter image description here

Upvotes: 5

Views: 1530

Answers (1)

Morteza Rastgoo
Morteza Rastgoo

Reputation: 6986

Have you tried AnimatedSwitcher

The AnimatedSwitcher widget allows you to switch between two or more widgets with an animation as you transition. By default, a FadeTransiton will appear between two widgets. Set a duration and play with the parameters to achieve the transition you are looking for.

Take a look at: https://api.flutter.dev/flutter/widgets/AnimatedSwitcher-class.html

A demo: https://www.youtube.com/watch?v=2W7POjFb88g

Upvotes: 1

Related Questions