CODEWITHSUNDEEP
androiddartflutter
Deven Joshi
Deven Joshi

Reputation: 61

What is the equivalent of a circular reveal animation in Flutter?

I was wondering how to implement a circular reveal animation from Android into Flutter. Also is there any resource for examples regarding Flutter animations?

Upvotes: 1

Views: 2181

Answers (1)

Anuj Sharma
Anuj Sharma

Reputation: 4324

For Reveal Effect you have to use CustomPainter class. 

class RevealProgressButtonPainter extends CustomPainter {
  double _fraction = 0.0;
  Size _screenSize;

  RevealProgressButtonPainter(this._fraction, this._screenSize);

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.green
      ..style = PaintingStyle.fill;

    var finalRadius =
        sqrt(pow(_screenSize.width / 2, 2) + pow(_screenSize.height / 2, 2));
    var radius = 24.0 + finalRadius * _fraction;

    canvas.drawCircle(Offset(size.width / 2, size.height / 2), radius, paint);
  }

  @override
  bool shouldRepaint(RevealProgressButtonPainter oldDelegate) {
    return oldDelegate._fraction != _fraction;
  }
}

You can read this awesome tutorial for Circular reveal effect. for detailed info.

Github Code

While doing reveal effect you have to open second screen smoothly. For this use Fluro library for routing and navigation. This will provide you Transition types.

router.navigateTo(context, "/profile_screen",transition: TransitionType.fadeIn,);

Upvotes: 3

Related Questions