Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use an AnimatedContainer for animated transforms (ex. Scale)

Tags:

flutter

dart

I'm looking to animate the scale of a container using the transform property of an AnimatedContainer; however, the scale is not being transitioned and jumps directly from start to end.

Code Snippet:

var container = new AnimatedContainer(
  duration: const Duration(milliseconds: 200),
  width: 50.0,
  height: 50.0,
  // selected is a bool that will be toggled
  transform: selected ? new Matrix4.identity() : new Matrix4.identity().scaled(0.2,0.2),
  decoration: new BoxDecoration(
    shape: BoxShape.circle,
    backgroundColor: Colors.blue[500],
  ),
  child: new Center(
    child: new Icon(
      Icons.check,
      color: Colors.white,
    ),
  )
);

Any insight on what's going on?

like image 762
Dvdwasibi Avatar asked Mar 08 '17 04:03

Dvdwasibi


1 Answers

I'm afraid transform is one of the properties we don't animate (child is another). If you want to animate the scale, you can use ScaleTransition.

ScaleTransition: https://docs.flutter.io/flutter/widgets/ScaleTransition-class.html

Bug for Matrix lerp: https://github.com/flutter/flutter/issues/443

like image 147
Ian Hickson Avatar answered Oct 11 '22 07:10

Ian Hickson