Sign in
Build 10x products in minutes by chatting with AI - beyond just a prototype.
Every user interaction in Flutter apps turns delightful when coupled with smooth animations. Let's focus on one essential animation component in Flutter, fading a widget. This enhances UI by introducing graceful fade-in and fade-out transitions based on user input or other state changes.
‍
For fade transitions in your app, the AnimatedOpacity widget is a great tool to start with. However, the FadeTransition widget gives you more control over the animation.
Before getting our hands dirty with code, make sure you have the following:
Let's import the material.dart package to start with our main function:
1 import 'package:flutter/material.dart'; 2 void main() { 3 runApp(MyApp()); 4 } 5
‍
The Flutter fade-in widget uses the opacity property to modulate the visibility of the child widget—the lower the opacity, the less visible the child widget becomes.
We will create a fade-in Flutter app example:
1 class MyApp extends StatelessWidget { 2 @override 3 Widget build(BuildContext context) { 4 return MaterialApp( 5 home: Scaffold( 6 appBar: AppBar( 7 title: Text('Fade In Animation'), 8 ), 9 body: Center( 10 child: MyFadeIn( 11 child: FlutterLogo(size: 200), 12 ), 13 ), 14 ), 15 ); 16 } 17 } 18
In the above example, we create a new class 'MyFadeIn', which will encompass the fade-in animation.
‍
Highlighted next is the step-by-step code for the creation of a Flutter fade-in widget using the FadeTransition widget.
Firstly, let's extend StatefulWidget:
1 class MyFadeIn extends StatefulWidget { 2 final Widget child; 3 MyFadeIn({Key key, @required this.child}) : super(key: key); 4 5 @override 6 _MyFadeInState createState() => _MyFadeInState(); 7 } 8
Now, we animate the fade using the AnimationController:
1 class _MyFadeInState extends State<MyFadeIn> with TickerProviderStateMixin { 2 AnimationController _controller; 3 4 @override 5 void initState() { 6 super.initState(); 7 _controller = AnimationController( 8 duration: const Duration(seconds: 3), 9 vsync: this, 10 )..forward(); // Start the fade-in on initState. 11 } 12 13 @override 14 Widget build(BuildContext context) { 15 return FadeTransition( 16 opacity: _controller, 17 child: widget.child, 18 ); 19 } 20 } 21
In the above code, we leverage the FadeTransition widget to animate the opacity of the 'child' widget. Remember, the 'child' we are fading in is the FlutterLogo as specified earlier.
‍
The Flutter fade-out widget utilizes the AnimatedOpacity widget to create a fading effect. Here, we'll create a feature that adjusts the opacity of a widget from fully opaque to fully transparent, thus creating a fade-out effect. We start by extending StatefulWidget:
1 class MyFadeOut extends StatefulWidget { 2 final Widget child; 3 MyFadeOut({Key key, @required this.child}) : super(key: key); 4 5 @override 6 _MyFadeOutState createState() => _MyFadeOutState(); 7 } 8
Now, let's implement fading out using AnimatedOpacity:
1 class _MyFadeOutState extends State<MyFadeOut> { 2 double _opacity = 1; 3 4 _fadeOut() { 5 setState(() { 6 _opacity = 0; 7 }); 8 } 9 10 @override 11 Widget build(BuildContext context) { 12 return GestureDetector( 13 onTap: _fadeOut, 14 child: AnimatedOpacity( 15 opacity: _opacity, 16 duration: Duration(seconds: 3), 17 child: widget.child, 18 ), 19 ); 20 } 21 } 22
With the above code, we use AnimatedOpacity which allows us to adjust the opacity. In this instance, a user input (tap on the widget) initiates a transition from fully opaque (_opacity = 1) to fully transparent (_opacity = 0), thus implementing the fade-out effect.
‍
Working with animations often involves solving common hitches. Let's go over a few:
‍
There's no denying that animations like fading elevate UX, and mastering how to create and control these in Flutter is a valuable skill. Whether you are leveraging AnimatedOpacity or the FadeTransition widget, the result is an application that's more engaging and intuitive.
Applying what we learned, you can now set a seamless fade-in or fade-out animation in your Flutter apps with ease. Always remember, a great app is not just about fulfilling user requirements, but also about incorporating fine details for a refined experience.
Hope you found this walk-through valuable. Happy coding!