Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can you use Flutter's transform class to animate scale?

I'm trying to animate two square containers so that when they are tapped they are animated to scale. I see all these transform class examples online that show animation of a widget however when I use the transform class the scale just jumps from its initial value to its final value.

My end goal is to animate a container to 'bounce' every time it is tapped like what you can do with bounce.js in web development. To understand what I mean you can go to http://bouncejs.com, click 'select preset' in the upper left corner, select jelly from the drop down menu and click 'play animation'.

Can this be done with the transform class?

Here is my code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();
}

var squareScaleA = 0.5;
var squareScaleB = 0.5;

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Bounce Example"),
      ),
      body: Stack(
        children: <Widget>[
          Container(
            width: 300.0,
            height: 150.0,
            color: Colors.yellowAccent,
          ),
          Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  GestureDetector(
                    onTap: () {
                      setState(() {
                        squareScaleA = 1.0;
                      });
                    },
                    child: Transform.scale(
                      scale: squareScaleA,
                      child: Container(
                        width: 150.0,
                        height: 150.0,
                        color: Colors.green,
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      setState(() {
                        squareScaleB = 1.0;
                      });
                    },
                    child: Transform.scale(
                      scale: squareScaleB,
                      child: Container(
                        width: 150.0,
                        height: 150.0,
                        color: Colors.blue,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Thanks in advance for any help!

like image 696
hello_friend Avatar asked Mar 25 '19 20:03

hello_friend


People also ask

How do you scale in flutter?

For convenience, to scale the child uniformly, instead of providing scaleX and scaleY , the scale parameter may be used. At least one of scale , scaleX , and scaleY must be non-null. If scale is provided, the other two must be null; similarly, if it is not provided, one of the other two must be provided.

How do you use AnimatedBuilder in flutter?

AnimatedBuilder is useful for more complex widgets that wish to include an animation as part of a larger build function. To use AnimatedBuilder, simply construct the widget and pass it a builder function. For simple cases without additional state, consider using AnimatedWidget.

What is size transition in flutter?

SizeTransition acts as a ClipRect that animates either its width or its height, depending upon the value of axis. The alignment of the child along the axis is specified by the axisAlignment.


1 Answers

You need to use Animations, you can start using AnimationController it's very simple , I fixed your sample :

    class _MyHomePageState extends State<TestingNewWidget>
        with TickerProviderStateMixin {
      var squareScaleA = 0.5;
      var squareScaleB = 0.5;
      AnimationController _controllerA;
      AnimationController _controllerB;

      @override
      void initState() {
        _controllerA = AnimationController(
            vsync: this,
            lowerBound: 0.5,
            upperBound: 1.0,
            duration: Duration(seconds: 1));
        _controllerA.addListener(() {
          setState(() {
            squareScaleA = _controllerA.value;
          });
        });
        _controllerB = AnimationController(
            vsync: this,
            lowerBound: 0.5,
            upperBound: 1.0,
            duration: Duration(seconds: 1));
        _controllerB.addListener(() {
          setState(() {
            squareScaleB = _controllerB.value;
          });
        });
        super.initState();
      }

      @override
      void dispose() {
        _controllerA.dispose();
        _controllerB.dispose();
        super.dispose();
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Bounce Example"),
          ),
          body: Stack(
            children: <Widget>[
              Container(
                width: 300.0,
                height: 150.0,
                color: Colors.yellowAccent,
              ),
              Column(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      GestureDetector(
                        onTap: () {
                          if (_controllerA.isCompleted) {
                            _controllerA.reverse();
                          } else {
                            _controllerA.forward(from: 0.0);
                          }
                        },
                        child: Transform.scale(
                          scale: squareScaleA,
                          child: Container(
                            width: 150.0,
                            height: 150.0,
                            color: Colors.green,
                          ),
                        ),
                      ),
                      GestureDetector(
                        onTap: () {
                          if (_controllerB.isCompleted) {
                            _controllerB.reverse();
                          } else {
                            _controllerB.forward(from: 0.0);
                          }
                        },
                        child: Transform.scale(
                          scale: squareScaleB,
                          child: Container(
                            width: 150.0,
                            height: 150.0,
                            color: Colors.blue,
                          ),
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        );
      }
    }

Also you can read more about animation here: https://flutter.dev/docs/development/ui/animations

like image 138
diegoveloper Avatar answered Oct 12 '22 23:10

diegoveloper