CODEWITHSUNDEEP
flutterdartcustomizationflutter-animation
Mussadaq Ahmad Jamil
Mussadaq Ahmad Jamil

Reputation: 63

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

Upvotes: 1

Views: 322

Answers (2)

cloudpham93
cloudpham93

Reputation: 566

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,
    ),
  ),
)

Upvotes: 1

JoKr
JoKr

Reputation: 5256

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

Upvotes: 1

Related Questions