Question

0

326

Views

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?

over 4 years ago · Santiago Trujillo

3 answers

Answer question

0

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

over 4 years ago · Santiago Trujillo Report

0

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