Flutter accompanies an amazing arrangement of animation widgets to add movement and embellishments to your flutter application. Be that as it may, imagine a scenario in which you need something truly basic. Perhaps something as straightforward as fading a widget. The Flutter SDK offers the FadeTransition widget for you. Flutter has an amazing animation engine for adding movement and impacts to your Flutter application. However, once in a while, you simply need to accomplish something simple — like fading in a widget. Flutter has a lot of transitions prepared to drop into your Flutter application.
In this blog, we will Explore FadeTransition Widget In Flutter. We will see how to implement a demo program of the fade transition widget and how to use FadeTransition widget in your flutter applications which can be used to animate the opacity of a widget.
FadeTransition class – widgets library – Dart API
API docs for the FadeTransition class from the widgets library, for the Dart programming language.api.flutter.dev
Table Of Contents::
FadeTransition Widget:
FadeTransition allows you to blur a widget in and out by animating its opacity. In this way, you simply need to give the opacity boundary with animation and a child widget on which the animation must be performed. Yet, where does the animation come from? You initially need to make an AminationController set the duration and afterward make the animation giving the beginning and end opacity values.
For more info on FadeTransition Widget,Watch this video By Flutter :
Below demo video shows how to create a fading animation in a flutter. It shows how the fading animation will work using the FadeTransition widget in your flutter applications. It shows or hides a widget. The reverse fade transition animation was true. It depends on the duration of when the widget will show or hide. It will be shown on your device.
Demo Module :
Properties:
There are some properties of FadeTransitionwidget is:
- >
Key key: The widget’s key, used to control if it should be replaced. - >
Animation<double> opacity: The animation that controls the fade transition of the child. - >
bool alwaysIncludeSemantics: Whether the semantic information of the children is always included. Defaults tofalse. - >
Widget child: The widget under this widget in the tree where the animation will be applied.
Implementation:
Step 1: Add the assets
Add assets to pubspec — yaml file.
assets:
- assets/
Step 2: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file calledfade_transition_demo.dart inside the lib folder.
In the first place, you need to make your class extends State with TickerProviderStateMixin. That empowers you to pass this as the vsync the contention in the constructor of AnimationController.We will pass is an Animation<double> that characterizes the animation to be applied to the child widget. Making an Animation expects you to make an AnimationController.
AnimationController _controller;
Animation<double> _animation;
We will add initState() method. In this method, we will add a _controller is equal to the AnimationController(). Inside, we will add the duration of three seconds means is only used when going forward. Otherwise, it specifies the duration going in both directions. We will animation repeat in a bracket reverse is true. We will create the Animation instance, then add _animaton is equal to the CurvedAnimation(). Inside, we will add a parent for the animation controller. The parent arguments must not be null. We will add curve means to use in the forward direction. We will add CurvedAnimation with easeIn curve.
initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 3),
vsync: this,
)..repeat(reverse:true);
_animation = CurvedAnimation(
parent: _controller,
curve: Curves.easeIn
);
}
We will create a void dispose() method. In this method, we will be adding a code for disposing of the controller inside.
@override
void dispose() {
_controller.dispose();
super.dispose();
}
We will create a FadeTransition() method. In this method, we will add opacity means animation that controls the opacity of the child. We will add a column widget. In this widget, we will add text and images.
FadeTransition(
opacity: _animation,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Flutter Dev's",style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold),
),
Image.asset("assets/devs.jpg"),
],
),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
class FadeTransitionDemo extends StatefulWidget {
_FadeTransitionDemoState createState() => _FadeTransitionDemoState();
}
class _FadeTransitionDemoState extends State<FadeTransitionDemo>
with TickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;
initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 3),
vsync: this,
)..repeat(reverse:true);
_animation = CurvedAnimation(
parent: _controller,
curve: Curves.easeIn
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xffffffff),
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text( 'Flutter FadeTransition Widget Demo',),
),
body: Center(
child: FadeTransition(
opacity: _animation,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Flutter Dev's",style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold),
),
Image.asset("assets/devs.jpg"),
],
),
),
),
);
}
}
Conclusion:
In the article, I have explained the FadeTransition Widget basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to FadeTransition Widget On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up the FadeTransition Widget in your flutter projects. We will show you what the FadeTransition Widget is?. Some faadetransition widget properties, make a demo program for working FadeTransition Widget, and can create a fading animation to show or hide a widget. The reverse fade transition animation was true. It depends on the duration of when the widget will show or hide using the FadeTransition widget in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Fade Transition Widget Demo:
flutter-devs/flutter_fade_transition_widget_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
