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:

Dependency

Adding Images

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

Activating Assets

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

Importing the Dependency

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';

Creating Root of Application

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(),
    );
  }
}

Creating the Homepage

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:
      ),

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:

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,
             ),
           ],
         ),
       ),
     ),

Adding Button

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());

// root
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksForGeeks',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

// Homepage
class 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: