Every application needs to navigate through multiple pages and components in an application. In flutter on way to do so is make the use of routes (ie, pages). But when there is a need to just remove a part (element) from a page, using routes becomes redundant. This is where Fading comes in. In this, the component is simply faded away from the page. In this article, we will explore the same in detail.
Fading in Flutter is done through the use of AnimatedOpacity widget. Follow the below steps to do so:
- Create a container component to fade.
- Define a stateful widget.
- Add a button that toggles the visibility.
- Display the fading of the container component.
Let’s discuss them in detail.
Creating a Container:
This is the component that will fade upon the toggle of the button. A simple container is defined below:
Define a StatefulWidget:
Define a stateful component that will hold the container and the button and to know whether the box should be visible as below:
Adding the toggle button:
This is the button that on pressed makes the container invisible. It can be defined as below:
Display the fading:
Now use the AnimatedOpacity widget to fade the box. It is defined as below:
Complete Source Code:
- How to add fading TextView animation in Android
- How to Increase/Decrease Fading Rate of FadingTextView in Android?
- Difference Between Stateless and Stateful Widget in Flutter
- Wrap Widget in Flutter
- Raised Button widget in Flutter
- endDrawer Widget in Flutter
- Table Widget in Flutter
- PageView Widget in Flutter
- ListWheelScrollView Widget in Flutter
- FlatButton Widget in Flutter
- ListTile widget in Flutter
- Center widget in Flutter
- BottomNavigationBar Widget in Flutter
- ClipRRect Widget in Flutter
- Drawer Widget in Flutter
- ClipRect Widget in Flutter
- Opacity Widget in Flutter
- RotatedBox Widget in Flutter
- RichText Widget in Flutter
- TextSpan Widget in Flutter
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.