Question: I'm looking to animate the scale of a container using the [transform](https://docs.flutter.io/flutter/widgets/AnimatedContainer/transform.html) property of an [AnimatedContainer](https://docs.flutter.io/flutter/widgets/AnimatedContainer-class.html); 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?

Answer: 
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>
you can Animate using the Animated Builder,the below code will scale a Text from font Size 20-35 in 4 secs let me break this into steps to make you better understand

1.you need to implement your class from **TickerProviderStateMixin**. 

2.You need an **AnimationController** and a **Animation** variables;

3.wrap your widget inside an AnimatedBuilder (note AnimatedBuilder must return a Widget at least a container) and add a controller to the animation as 

```
animation: _controller,

```

and builder Which returns the AnimatedWidget

4.In the init method intialize the controller with vsync and the Duration of Animation.
and the animation with the Tweenit takes begin and end values which define the initial and final values of your Widget to be animated

for me, in this case, it was text widget so the begin and end Values will be corresponding to the fontSize.which receives variable values as `animation.value`

5.Finally How do you want the animation effect To be will be specified by the animate which takes in controller and the Curve effect

Here is a Working example

```
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<SplashScreen>
    with TickerProviderStateMixin {

  AnimationController _controller;
  Animation _animation;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xFF005CA9),
        body: Center(
          child: AnimatedBuilder(
            animation: _controller,
            builder: (BuildContext context, Widget child) {
              return Container(
                child: Text(
                  'Hello World',
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: _animation.value,
                      ),
                ),
              );
            },
          ),
        ));
  }

  void initState() {
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 4));
    _animation = Tween<double>(
      begin: 20,
      end: 35,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Curves.ease,
      ),
    );
    _controller.forward();
  }
}

```

the code above produces the following output

[![enter image description here](https://i.stack.imgur.com/Nk4Ks.gif)](https://i.stack.imgur.com/Nk4Ks.gif)