Explore AnimatedOpacity In Flutter
Eliminating a widget in Flutter is truly straightforward and simple. You simply need to revamp the tree without it. However, imagine a scenario where you need the widget to vanish yet at the same time occupy a space on the screen with the goal that it doesn’t disturb the remainder of the format. Well to settle this, you can attempt the AnimatedOpacity.
AnimatedOpacity class — widgets library — Dart API
API docs for the AnimatedOpacity class from the widgets library, for the Dart programming language.api.flutter.dev
In this blog, we will Explore AnimatedOpacity In Flutter. We will see how to implement a demo program of the animated opacity with some properties and how to create it in your flutter applications.
Table Of Contents::
AnimatedOpacity:
The AnimatedOpacity makes its child mostly transparent. This class colors its child into a middle buffer and afterward consolidates the child once again into the scene mostly transparent. For values of opacity other than 0.0 and 1.0, this class is moderately costly as it needs shading the child into a halfway support. For the value 0.0, the child is just not colored by any means. For the value 1.0, the child is colored without a moderate buffer.
Demo Module :
This demo video shows how to create animated opacity in a flutter. It shows how the animated opacity will work using the AnimatedOpacity class in your flutter applications. Basically, Opacity shows the disappear or presence of objects. In many situations, it can take a value from 1.0 to0.0 .1.0 methods full perceivability of the object and 0.0 means zero ability to see. Users can utilize any value in the middle of them for your ideal impact of opacity. It will be shown on your device.
Properties:
There ara some properties of AnimatedOpacity are:
- > key: This property is used to controls how one widget replaces another widget in the tree.
- > child: This property is the widget below this widget in the tree.
- > opacity: This property is used to the fraction to scale the child’s alpha value. An opacity of 1.0 is fully opaque. An opacity of 0.0 is fully transparent i.e., invisible. The opacity must not be null.
- > curve: This property is a collection of common animation and used to adjust the rate of change of animation over time, allowing them to speed up and slow down, rather than moving at a constant rate.
- > duration: This property represents a difference from one point in time to another. The duration may be “negative” if the difference is from a later time to an earlier.
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 called opacity_demo.dart inside the lib folder.
First, we will create two variables. The first one is _opacity is equal to zero and the second one is _width is 230.
var _opacity = 0.0;
var _width = 230.0;
In the body part, we will create a Container widget. Inside the container, we will add alignment was center, height from mediaquery, and add the variable of width. We will add decoration with a border-radius that is circular and add color. It’s a child, we will add a Row widget. In this widget, we will add an image and text.
Container(
alignment: Alignment.center,
height: MediaQuery.of(context).size.height *0.08,
width: _width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Colors.cyan[400],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.asset("assets/devs.jpg",
scale: 10,
fit: BoxFit.contain,
),
Padding(
padding: const EdgeInsets.only(right:30.0),
child: Text(
'Flutter Devs',
style: TextStyle(color: Colors.white,
fontSize: 20.0)
,
),
),
],
),
),
Now let’s wrap the Row with an AnimatedOpacity widget and add the required properties to the widget.
In the AnimatedOpacity(), we will add duration for milliseconds. Users can choose seconds, microseconds, minutes, hours, and days for a long animation. We will add a curve that was bounceIn means an oscillating curve that first grows and then shrinks in magnitude. We will add variable _opacity on the opacity property.
AnimatedOpacity(
duration: Duration(milliseconds: 700),
curve: Curves.bounceIn,
opacity: _opacity,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.asset("assets/devs.jpg",
scale: 10,
fit: BoxFit.contain,
),
Padding(
padding: const EdgeInsets.only(right:30.0),
child: Text(
'Flutter Devs',
style: TextStyle(color: Colors.white,
fontSize: 20.0)
,
),
),
],
),
),
Now, we wrap the whole code to GestureDetector() method. In this method, we will add onTap. On onTap, we will add setState() function. In this function, if _opacity is already 0.0 then make it 1.0 otherwise, it should go reverse to 0.0 . Simple toggle operation.
GestureDetector(
onTap: () {
setState(() {
_opacity = _opacity == 0.0 ? 1 : 0.0;
});
},
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class OpacityDemo extends StatefulWidget {
@override
OpacityDemoState createState() => OpacityDemoState();
}
class OpacityDemoState extends State<OpacityDemo> {
var _opacity = 0.0;
var _width = 230.0;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xffffffff),
appBar: AppBar(
backgroundColor: Colors.cyan[300],
title: Text("Flutter AnimatedOpacity Demo"),
automaticallyImplyLeading: false,
),
body: Center(
child: GestureDetector(
onTap: () {
setState(() {
_opacity = _opacity == 0.0 ? 1 : 0.0;
});
},
child: Container(
alignment: Alignment.center,
height: MediaQuery.of(context).size.height *0.08,
width: _width,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Colors.cyan[400],
),
child: AnimatedOpacity(
duration: Duration(milliseconds: 700),
curve: Curves.bounceIn,
opacity: _opacity,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.asset("assets/devs.jpg",
scale: 10,
fit: BoxFit.contain,
),
Padding(
padding: const EdgeInsets.only(right:30.0),
child: Text(
'Flutter Devs',
style: TextStyle(color: Colors.white,
fontSize: 20.0)
,
),
),
],
),
),
),
),
),
);
}
}
Conclusion:
In the article, I have explained the AnimatedOpacity of the basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to AnimatedOpacity 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 AnimatedOpacity in your flutter projects. We will show you what the AnimatedOpacity is?. Some AnimatedOpacity properties make a demo program for working AnimatedOpacity and show that when the user taps the container then, the text will be shown with the animated effect. It can take a value from 1.0 to0.0 .1.0 methods full perceivability of the object and 0.0 means zero ability to see. Users can utilize any value in the middle of them for your ideal impact of opacity using the AnimatedOpacity class 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 Animated Opacity Demo:
flutter-devs/flutter_animated_opacity_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.
