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

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

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

AnimatedContainer supports animting it's transform value, as follow:

/// scale to 95%, centerred
final width = 200.0;
final height = 300.0;
bool shouldScaleDown = true;// change value when needed
AnimatedContainer(
  color: Colors.blueAccent,
  width: width,
  height: height,
  duration: Duration(milliseconds: 100),
  transform: (shouldScaleDown
      ? (Matrix4.identity()
        ..translate(0.025 * width, 0.025 * height)// translate towards right and down
        ..scale(0.95, 0.95))// scale with to 95% anchorred at topleft of the AnimatedContainer
      : Matrix4.identity()),
  child: Container(),
);