Search code examples
flutterdartcustomizationflutter-animation

How can i animate container from square shape to parallelogram shape in flutter

Right Now i have a container of this kind of shape ,

enter image description here

I want to animate container from this shape to this one when on tap button was hit

enter image description here

So Who can i achieve this thing in Flutter

Solution

  • You can achieve skew by using matrix transformation

    Transform(
  transform: Matrix4.skewX(-0.3),
  child: YourCard(),
)

    Now all you need to do is animate -0.3 value. There are several ways to do it, depending on what you need. You could use Tween or AnimatedWidget. Since it's not easy to explain here's video that could help in choosing it: https://www.youtube.com/watch?v=GXIJJkq_H8g