Flutter set custom limitaion for ScaleTransition

1,169

All you need is Tween.

Tween<double> _tween = Tween(begin: 0.1, end: 1);

Full example:

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView Example',
      home: ScaleTransitionExample(),
    );
  }
}
class ScaleTransitionExample extends StatefulWidget {
  _ScaleTransitionExampleState createState() => _ScaleTransitionExampleState();
}
class _ScaleTransitionExampleState extends State<ScaleTransitionExample> with TickerProviderStateMixin {
  AnimationController _controller;
  Tween<double> _tween = Tween(begin: 0.1, end: 1);
  initState() {
    super.initState();
    _controller = AnimationController(duration: const Duration(milliseconds: 1000), vsync: this);
    _controller.forward();
  }
  @override
  dispose() {
    _controller.dispose();
    super.dispose();
  }
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Stack(
        children: <Widget>[
          Center(
            child: ScaleTransition(
              scale: _tween.animate(CurvedAnimation(parent: _controller, curve: Curves.ease)),
              alignment: Alignment.center,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.check, size: 100.0, color: Colors.green),
                ],
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomLeft,
            child: RaisedButton(
              child: Text('forward'),
              onPressed: () => _controller.forward(),
            ),
          ),
          Align(
            alignment: Alignment.bottomRight,
            child: RaisedButton(
              child: Text('reverse'),
              onPressed: () => _controller.reverse(),
            ),
          ),
        ],
      ),
    );
  }
}
Share:
1,169
DolDurma
Author by

DolDurma

Updated on December 12, 2022

Comments

  • DolDurma
    DolDurma 2 minutes

    in this sample code i want to limit ScaleTransition for 10% as icon size when i try to zoom-in or zoom-out scaling icon, i can't do that to make this limitation for icon

    import 'package:flutter/material.dart';
    import 'package:flutter/animation.dart';
    void main() => runApp(MyApp());
    class ScaleTransitionExample extends StatefulWidget {
      _ScaleTransitionExampleState createState() => _ScaleTransitionExampleState();
    }
    class _ScaleTransitionExampleState extends State<ScaleTransitionExample> with TickerProviderStateMixin {
      AnimationController _controller;
      Animation<double> _animation;
      initState() {
        super.initState();
        _controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this);
        _animation = CurvedAnimation(parent: _controller, curve: Curves.ease);
        _controller.forward();
      }
      @override
      dispose() {
        _controller.dispose();
        super.dispose();
      }
      Widget build(BuildContext context) {
        return Container(
            color: Colors.white,
            child: Stack(
              children: <Widget>[
                Center(
                  child: ScaleTransition(
                      scale: _animation,
                      alignment: Alignment.center,
                      child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
                        Icon(Icons.check, size: 100.0, color: Colors.green),
                      ])),
                ),
                Align(
                  alignment: Alignment.bottomLeft,
                  child:RaisedButton(
                    child: Text('forward'),
                    onPressed: ()=>_controller.forward(),
                  ),
                ),
                Align(
                  alignment: Alignment.bottomRight,
                  child:RaisedButton(
                    child: Text('reverse'),
                    onPressed: ()=>_controller.reverse(),
                  ),
                ),
              ],
            ));
      }
    }
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'ListView Example',
          home: ScaleTransitionExample(),
        );
      }
    }