Question 79180 in Flutter Question posted in
The official Flutter documentation can be found here.

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

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    You can try Transform with Matrix4

    enter image description here

    Transform(
  alignment: Alignment.topRight,
  transform: Matrix4.skewY(0.3)..rotateZ(-math.pi / 12.0),
  child: Container(
    height:300,
    width:120,
    color:Colors.orange,
    child: Text(
      'Hello, World!',
      style: Theme.of(context).textTheme.headline4,
    ),
  ),
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search