Scale Transition in Flutter -Loader Animation
14,426
You'd need to add a double value to your code:
double _opacity = 1;
And a listener for your animation controller at the end of the initState
_controller.addListener(() {
setState(() {
_opacity = 1 - _controller.value;
});
});
And on your widget tree, you can add this:
ScaleTransition(
scale: animation,
child: Opacity(
opacity: _opacity,
child: Container(
Author by
HaSnen Tai
Hi, This is Hasnen Tai. I am working as a Software Intern at Toshiba Software India. I also own a small youtube channel named as "Trending Codes" where I teach about HTML CSS and JS. Mainly focusing on the frontend.
Updated on June 04, 2022Comments
-
HaSnen Tai almost 2 years
I have made one container with scale transition which grows from 0 height and width to 90 height and width.
Now what,I wanted to do is it should slowly fade out as it grows.Do i need to create another animation controller for opacity ? what is the best way to do it ? Can Some one Help?
My Code Look Like This
import 'package:flutter/animation.dart'; import 'package:flutter/material.dart'; void main() => runApp(new MyAnimationApp()); class MyAnimationApp extends StatefulWidget { @override _MyAnimationAppState createState() => _MyAnimationAppState(); } class _MyAnimationAppState extends State<MyAnimationApp> with TickerProviderStateMixin { Animation<double> animation; AnimationController _controller; @override void initState() { super.initState(); _controller = new AnimationController(vsync: this, duration: Duration(seconds: 3)) ..repeat(); animation = new CurvedAnimation(parent: _controller, curve: Curves.linear); } @override Widget build(BuildContext context) { return new MaterialApp( home: new Scaffold( body: new Container( child: new Center( child: new ScaleTransition( scale: animation, child: new Container( decoration: new BoxDecoration( color: Color(0XFFEC3457), shape: BoxShape.circle), height: 90.0, width: 90.0, ), ), ), ), ), ); } }
SS is here
Thanks !!! Hoping for a reply ......