Dec

Opacity-Animation

Opacity-Animation:

Fade a Widget in and out:

As User Interface UI developers, we often need to show and hide elements on the screen. However, quickly popping elements on and off the screen can feel jarring to end users. Instead, we can fade elements in and out with an opacity animation to create a smooth experience.

Using Opacity Animation in Flutter:

Show a box to fade in and out
Define a StatefulWidget
Display a button that toggles the visibility
Fade the box in and out

Creating a box to fade in and out:

Creating a box with color green.

Container(
width: 200.0,
height: 200.0,
color: Colors.green,
);

Define a StatefulWidget :

Now we have created a green box above to animate, we’ll need that whether the box should be visible or invisible. To do this, we can use a StatefulWidget.

A StatefulWidget is a class that creates a State object. The State object holds some data about our app and provides a way to update that data. When we update the data, we can also ask Flutter to rebuild our UI with those changes.

In our case, we’ll have one piece of data: a boolean representing whether the button is visible or invisible.

To construct a StatefulWidget, we need to create two classes: A StatefulWidget and a corresponding Stateclass.

NOTE: The Flutter plugins for Android Studio and VSCode include the stful snippet to quickly generate this code!

// The StatefulWidget's job is to take in some data and create a State class.
// In this case, our Widget takes in a title, and creates a _MyHomePageState.
class MyHomePage extends StatefulWidget {
final String title;

MyHomePage({Key key, this.title}) : super(key: key);

@override
_MyHomePageState createState() => _MyHomePageState();
}

// The State class is responsible for two things: holding some data we can
// update and building the UI using that data.
class _MyHomePageState extends State {
// Whether the green box should be visible or invisible
bool _visible = true;

@override
Widget build(BuildContext context) {
// The green box will go here with some other Widgets!
}
}

Create a button that toggles the visibility:

Now we have some data to determine whether our green box should be visible or invisible, we’ll need a way to update that data. In our case, if the box is visible, we want to hide it. If the box is hidden, we want to show it!

To create this, we’ll display a button. When a user presses the button, we’ll flip the boolean from true to false, or false to true. We need to make this change using setState, it is a method on the State class. This will let Flutter know it needs to rebuild the Widget.

FloatingActionButton(
onPressed: () {
// Make sure we call setState! This will tell Flutter to rebuild the
// UI with our changes!
setState(() {
_visible = !_visible;
});
},
tooltip: 'Toggle Opacity',
child: Icon(Icons.flip),
);

Fade the box in and out:

We’ve got a green box on screen. We’ve got a button to toggle the visibility to true or false. So how do we fade the box in and out?

by using an AnimatedOpacity Widget!

The AnimatedOpacity Widget requires three arguments:

opacity: A value from 0.0 (invisible) to 1.0 (fully visible).
duration: How long the animation should take to complete
child: The Widget to animate. In our case, the green box.

AnimatedOpacity(
// If the Widget should be visible, animate to 1.0 (fully visible). If
// the Widget should be hidden, animate to 0.0 (invisible).
opacity: _visible ? 1.0 : 0.0,
duration: Duration(milliseconds: 500),
// The green box needs to be the child of the AnimatedOpacity
child: Container(
width: 200.0,
height: 200.0,
color: Colors.green,
),
);

Below is the Complete Example Code :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appTitle = 'Opacity Demo';
return MaterialApp(
title: appTitle,
home: MyHomePage(title: appTitle),
);
}
}

MyHomePage({Key key, this.title}) : super(key: key);

@override
_MyHomePageState createState() => _MyHomePageState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: AnimatedOpacity(
// If the Widget should be visible, animate to 1.0 (fully visible). If
// the Widget should be hidden, animate to 0.0 (invisible).
opacity: _visible ? 1.0 : 0.0,
duration: Duration(milliseconds: 500),
// The green box needs to be the child of the AnimatedOpacity
child: Container(
width: 200.0,
height: 200.0,
color: Colors.green,
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// Make sure we call setState! This will tell Flutter to rebuild the
// UI with our changes!
setState(() {
_visible = !_visible;
});
},
tooltip: 'Toggle Opacity',
child: Icon(Icons.flip),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}

Congratulations You Have Learned Opacity-Animation In Flutter…!!!!

If It Is Useful Share It With Your Friends….!!!

If You Have Any Query Please make A Comment….!!!

PrevNext