Flutter – Circular reveal Animation
The Circular Reveal Animation in Flutter is inspired by ViewAnimationUtils.createCircularReveal(…). It does exactly what the name suggests, meaning it is used to reveal content generally an image circularly where the circle grows bigger and makes the image visible.
In this article, we will implement a simple Circular Reveal Animation through a simple application. To build the same follow the below steps:
- Add the dependency to pubspec.yaml file.
- Create an image directory and add the images that are to be revealed in the same.
- Activate the assets in the pubspec.yaml file
- Import the dependency to main.dart file
- Create the root of the application by extending a StatelessWidget
- Design the Homepage by extending a StatefulWidget
- In the body of the Homepage call the CircularRevealAnimation().
- Add a floatingActionButton and assign an action to it to reveal the image.
Let’s look into the steps in detail.
Adding the Dependency
Add the circular_reveal_animation dependency into the dependencies section of the pubspec.yaml file as shown below:
The images that are to be revealed using the circular reveal animation can be added to an image directory inside the assets directory as shown below:
In the pubspec.yanl file, the assets can be activated to be used in the application by adding a path to the image as shown below under the assets section:
Importing the Dependency
Use the below line of code in the main.dart file to use the circular_reveal_animation dependency:
Creating Root of Application
Extend a StatelessWidget to create a root for the application as shown below:
Creating the Homepage
Extend a StatefulWidget to an appbar and a body to create a plane Homepage for the application as shown below:
Calling the Dependency
In the body of the Homepage make a call to the CircularRevealAnimation() function and add the images to the same as shown below:
Add a FloatingActionButton and assign the action to it that calls the CircularRevealAnimation() from the dependency on pressed as shown below:
Complete Source Code:
Please Login to comment...