CODEWITHSUNDEEP
dartflutter
Dvdwasibi
Dvdwasibi

Reputation: 11487

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

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?

Upvotes: 11

Views: 15334

Answers (3)

Quanhua Guan
Quanhua Guan

Reputation: 463

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

Upvotes: 4

Mahesh Jamdade
Mahesh Jamdade

Reputation: 20231

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

Upvotes: 1

Ian Hickson
Ian Hickson

Reputation: 8599

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

Upvotes: 2

Related Questions