Last Updated on 2021-10-12 by Clay
When we using Flutter to make a mobile application, sometimes we have a need to hide or show some components (or widgets).
Of course we can do it by changing the visibility, changing the color or even deleting the components.
However, these methods will make the components quickly hide/show in an instant, which is not a gorgeous displayed effect.
Yes, no matter which field you need to pay more attention to beauty, even the disappearance or appearance of control components, it is best to add some animation effects.
Because of this, today I will record how to add the fade-in or fade-out effect when the component is showed/hidden.
How to fade-in and fade-out
We need these following components to be example:
StatefulWidget: Because it is to make the component render animation, it can not useStatelessWidgetAnimatedOpacitywidget: A test element with adjustable transparency. A component we want to hide (for example, aContainer) needs to be its childFloatingActionButton: A button to control component fade-in or fade-out
AnimatedOpacity has the following most basic parameters to be set:
opacity: Transparency, set to 1.0 when displayed (true) and 0.0 when hiddenduration: The time to switch the state, the longer the setting, the longer the time for the fade-out/fade-in animation effect
The following is an example:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
bool visible = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Fade I/O"),
),
body: Center(
// A test component to test fade in or fade out
child: AnimatedOpacity(
opacity: visible ? 1.0 : 0.0,
duration: Duration(milliseconds: 1000),
// The test component is a container
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
),
// Add a new button to control fade in or fade out
floatingActionButton:
FloatingActionButton(
onPressed: () {
setState(() {
visible = !visible;
});
},
child: Icon(visible ? Icons.lightbulb_outline : Icons.lightbulb),
)
);
}
}
Output:
References
- https://flutter.dev/docs/cookbook/animation/opacity-animation
- https://stackoverflow.com/questions/57541690/flutter-fadein-fadeout-animation-together
- https://pub.dev/packages/flutter_fadein