Reputation: 17360
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
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