Flutter – Circular reveal Animation

15 Feb, 2021
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.
Add the circular_reveal_animation dependency into the dependencies section of the pubspec.yaml file as shown below:
Dependency
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:
Adding Images
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:
Activating Assets
Use the below line of code in the main.dart file to use the circular_reveal_animation dependency:
import 'package:circular_reveal_animation/circular_reveal_animation.dart';

Extend a StatelessWidget to create a root for the application as shown below:
Dart
class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'GeeksForGeeks',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: MyHomePage(),    );  }}
Extend a StatefulWidget to an appbar and a body to create a plane Homepage for the application as shown below:
Dart
class MyHomePage extends StatefulWidget {  @override  _MyHomePageState createState() => _MyHomePageState();}  class _MyHomePageState extends State<MyHomePage>    with SingleTickerProviderStateMixin {  AnimationController animationController;  Animation<double> animation;    @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("GeeksForGeeks"),        backgroundColor: Colors.green,      ),      body:       ),
In the body of the Homepage make a call to the CircularRevealAnimation() function and add the images to the same as shown below:
Dart
body: Padding(       padding: const EdgeInsets.all(16.0),       child: Center(         child: Column(           mainAxisSize: MainAxisSize.min,           children: <Widget>[             SizedBox(height: 16),             CircularRevealAnimation(               child: Image.asset('assets/wonderwomen.jpg'),               animation: animation,               centerAlignment: Alignment.centerRight,               centerOffset: Offset(130, 100),               minRadius: 12,               maxRadius: 200,             ),           ],         ),       ),     ),
Add a FloatingActionButton and assign the action to it that calls the CircularRevealAnimation() from the dependency on pressed as shown below:
Dart
floatingActionButton: FloatingActionButton(          backgroundColor: Colors.green,          onPressed: () {        if (animationController.status == AnimationStatus.forward ||            animationController.status == AnimationStatus.completed) {          animationController.reverse();        } else {          animationController.forward();        }      }),    );
Complete Source Code:
Dart
import 'package:circular_reveal_animation/circular_reveal_animation.dart';import 'package:flutter/material.dart';    void main() => runApp(MyApp());  // rootclass MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'GeeksForGeeks',      theme: ThemeData(        primarySwatch: Colors.blue,      ),      home: MyHomePage(),    );  }}  // Homepageclass MyHomePage extends StatefulWidget {  @override  _MyHomePageState createState() => _MyHomePageState();}  class _MyHomePageState extends State<MyHomePage>    with SingleTickerProviderStateMixin {  AnimationController animationController;  Animation<double> animation;    // initialize state  @override  void initState() {    super.initState();    animationController = AnimationController(      vsync: this,      duration: Duration(milliseconds: 1000),    );    animation = CurvedAnimation(      parent: animationController,      curve: Curves.easeIn,    );  }    @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("GeeksForGeeks"),        backgroundColor: Colors.green,      ),      body: Padding(        padding: const EdgeInsets.all(16.0),        child: Center(          child: Column(            mainAxisSize: MainAxisSize.min,            children: <Widget>[              SizedBox(height: 16),              CircularRevealAnimation(                child: Image.asset('assets/wonderwomen.jpg'),                animation: animation,                centerAlignment: Alignment.centerRight,                centerOffset: Offset(130, 100),                minRadius: 12,                maxRadius: 200,              ),            ],          ),        ),      ),              // button with assigned action      floatingActionButton: FloatingActionButton(          backgroundColor: Colors.green,          onPressed: () {        if (animationController.status == AnimationStatus.forward ||            animationController.status == AnimationStatus.completed) {          animationController.reverse();        } else {          animationController.forward();        }      }),    );  }    }
Output:
android
Flutter
Flutter UI-components
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
ListView Class in Flutter
Flutter - Search Bar
Flutter - Dialogs
Flutter - FutureBuilder Widget
Flutter - Flexible Widget
Flutter Tutorial
Flutter - Search Bar
Flutter - Dialogs
Flutter - FutureBuilder Widget
Flutter - Flexible Widget