DolDurma
DolDurma

Reputation: 17360

Flutter set custom limitaion for ScaleTransition

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

Upvotes: 3

Views: 2282

Answers (1)

CopsOnRoad
CopsOnRoad

Reputation: 268414

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

Upvotes: 6

Related Questions