Flutter - Set the scale of a widget

Question

I am trying to create an animation that "pops" the widget to the front and returns to it

import "package:flutter/material.dart";

class ScoreCounter extends StatefulWidget {
  @override
  _ScoreCounter createState() => new _ScoreCounter();
}

class _ScoreCounter extends State<ScoreCounter> with SingleTickerProviderStateMixin{
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = new AnimationController(
      duration: const Duration(seconds: 10),
      vsync: this,
    )..forward();
  }

  @override
  build(BuildContext context){
    return new AnimatedBuilder(
      animation: _controller,
      child: new Container(width: 200.0, height: 200.0, color: Colors.green),
      builder: (BuildContext context, Widget child) {
        //What to return that scales the element
      },
    );
  }
}

For rotating, I would use a Transform and return a Matrix. But what should I return to accomplish the scaling animation?

Thanks in advance

Answer 1

Just as a alternative, to set just scale for a specific Widget.

Transform.scale(
  scale: 1.0,
  child: Container(
    height: 200.0,
    width: 200.0,
    color: Colors.pink,
  ),
),

Answer 2

If you're going to size your contents manually you could just read controller.value in your builder function and use that to set the size of the container.

Alternatively, you could consider a pair of SizeTransitions for each axis. The Align class may also be useful because you can set a sizeFactor in each dimension.

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new HomePage(),
  ));
}

class HomePage extends StatefulWidget {
  HomePageState createState() => new HomePageState();
}

class HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.sort),
        onPressed: () {},
      ),
      body: new Center(
        child: new ScoreCounter(),
      ),
    );
  }
}

class ScoreCounter extends StatefulWidget {
  @override
  _ScoreCounter createState() => new _ScoreCounter();
}

class _ScoreCounter extends State<ScoreCounter>
  with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = new AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    )
      ..forward();
  }


  @override
  build(BuildContext context){
    return new AnimatedBuilder(
      animation: _controller,
      builder: (BuildContext context, Widget child) {
        double size = _controller.value * 200.0;
        return new Container(width: size, height: size, color: Colors.green);
      },
    );
  }
}

Answer 3

Another Approach is to create generalized Scale Transformation.

Simply add this method to your component

  Matrix4 scaleXYZTransform({
    double scaleX = 1.00,
    double scaleY = 1.00,
    double scaleZ = 1.00,
  }) {
    return Matrix4.diagonal3Values(scaleX, scaleY, scaleZ);
  }

Now you can easily Scale any widget by wrapping it:

 Transform(
          transform: scaleXYZTransform(scaleX: .5, scaleY: .5),
          child: Container(
            child: myAwesomeWidget(),
          ));