Circular Reveal Animation as Flutter widget

circular reveal animation

circular reveal animation as flutter widget!

inspired by android’s viewanimationutils.createcircularreveal(...).

demo

usage

circularrevealanimation(
  // @required
  child: container(color: colors.red),
  // @required [animation<double>]
  animation: animation,
  // child's center if not specified
  center: offset(0, 300),
  // 0 if not specified
  minradius: 12,
  // distance from center to further child's corner if not specified
  maxradius: 200,
);

example

import 'package:flutter/material.dart';
import 'package:circular_reveal_animation/circular_reveal_animation.dart';

void main() => runapp(myapp());

class myapp extends statelesswidget {
  @override
  widget build(buildcontext context) {
    return materialapp(
      title: 'cra demo',
      theme: themedata(
        primaryswatch: colors.blue,
      ),
      home: myhomepage(),
    );
  }
}

class myhomepage extends statefulwidget {
  @override
  _myhomepagestate createstate() => _myhomepagestate();
}

class _myhomepagestate extends state<myhomepage>
    with singletickerproviderstatemixin {
  animationcontroller animationcontroller;
  animation<double> animation;

  @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("cra demo"),
      ),
      body: padding(
        padding: const edgeinsets.all(16.0),
        child: circularrevealanimation(
          minradius: 12,
          maxradius: 200,
          center: offset(0, 300),
          child: container(color: colors.red),
          animation: animation,
        ),
      ),
      floatingactionbutton: floatingactionbutton(onpressed: () {
        if (animationcontroller.status == animationstatus.forward ||
            animationcontroller.status == animationstatus.completed) {
          animationcontroller.reverse();
        } else {
          animationcontroller.forward();
        }
      }),
    );
  }
}