Line data Source code
1 : import 'package:flutter/material.dart'; 2 : 3 : /// Custom clipper for circular page reveal. 4 : class CircularWave extends CustomClipper<Path> { 5 : final double revealPercent; 6 : final Size iconSize; 7 : final double verReveal; 8 : 9 3 : CircularWave( 10 : this.iconSize, 11 : this.revealPercent, 12 : this.verReveal, 13 : ); 14 : 15 3 : @override 16 : Path getClip(Size size) { 17 3 : final center = Offset( 18 3 : size.width, 19 9 : size.height * verReveal, 20 : ); 21 18 : final radius = 1000 * revealPercent + iconSize.width * 2; 22 3 : final diameter = 2 * radius; 23 3 : final path = Path(); 24 : 25 6 : path.lineTo(size.width, 0); 26 9 : path.lineTo(size.width, size.height); 27 6 : path.lineTo(0, size.height); 28 : 29 3 : final rect = Rect.fromLTWH( 30 6 : center.dx - radius, 31 6 : center.dy - radius, 32 : diameter, 33 : diameter, 34 : ); 35 : 36 : ///Adding Oval with path.addOval() Makes the clipper totally inverse 37 : ///So have to use addArc().It took me 3 hours to make this workaround, lol. 38 : ///try to use addOval instead, and u will find the issue 39 3 : path.addArc(rect, 90, -270); 40 : return path; 41 : } 42 : 43 3 : @override 44 : bool shouldReclip(CustomClipper<Path> oldClipper) { 45 : return true; 46 : } 47 : }