Last Updated on 2021-10-17 by Clay
FadeTransition is an animate effect I read when I learning the Flutter animation. Although I never have a requirement to use it, but it is very easy-to-use, so recorded by the way.
Simply put it, FadeTransition is similar to AnimatedOpacity ([Flutter] How To Fade-in And Fade-out Components), both are methods to control the transparency of components.
The difference is that FadeTransition can set a period to make the change of component transparency change repeatedly, forming a flickering animation effect.
FadeTransition
The use of FadeTransition is similar to most Flutter animations, we need to prepare the two objects:
AnimationController: The parameters such as periodAnimation<double>: The curve/animation of component
The explanation is a bit complicated, and it should be clear if you read the following code:
import 'package:flutter/material.dart';
// Main
void main() => runApp(MyApp());
// MyApp
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
// HomePage
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
// _HomePageState
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
// Controller
late AnimationController _controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
)..repeat(reverse: true);
// Animation
late Animation<double> _animation = CurvedAnimation(
parent: _controller,
curve: Curves.easeInOut
);
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: FadeTransition(
opacity: _animation,
child: Container(
height: 100,
width: 100,
color: Colors.red,
),
),
),
);
}
}
Output:
References
- https://api.flutter.dev/flutter/widgets/FadeTransition-class.html
- https://www.woolha.com/tutorials/flutter-using-fadetransition-widget-examples