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

Author by
DolDurma
Updated on December 12, 2022Comments
-
DolDurma 2 minutes
in this sample code i want to limit
ScaleTransition
for 10% as icon size when i try tozoom-in
orzoom-out
scaling icon, i can't do that to make this limitation for iconimport '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(), ); } }