New :: CircularWave Clipper

iamSahdeep · Sep 27, 2019 · ad844b2 · ad844b2
1 parent fdbcfc1
commit ad844b2
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 31 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
+import 'package:liquid_swipe/Constants/Helpers.dart';
 import 'package:liquid_swipe/liquid_swipe.dart';
 
+
 void main() {
   runApp(
     new MyApp(),
@@ -220,7 +222,8 @@ class MyApp extends StatelessWidget {
               fullTransitionValue: 500,
               enableSlideIcon: true,
               enableLoop: false,
-              positionSlideIcon: -0.5,
+              positionSlideIcon: 0.5,
+              waveType: WaveType.liquidReveal,
             )));
   }
 }
diff --git a/lib/Animation_Gesture/animated_page_dragger.dart b/lib/Animation_Gesture/animated_page_dragger.dart
@@ -2,8 +2,8 @@ import 'dart:async';
 import 'dart:ui';
 
 import 'package:flutter/material.dart';
+import 'package:liquid_swipe/Constants/Helpers.dart';
 
-import '../Constants/constants.dart';
 import '../liquid_swipe.dart';
 
 /// This class provides the animation controller

diff --git a/lib/Animation_Gesture/page_dragger.dart b/lib/Animation_Gesture/page_dragger.dart
@@ -1,7 +1,7 @@
 import 'dart:async';
 
 import 'package:flutter/material.dart';
-import 'package:liquid_swipe/Constants/constants.dart';
+import 'package:liquid_swipe/Constants/Helpers.dart';
 
 import '../liquid_swipe.dart';
 

diff --git a/lib/Animation_Gesture/page_reveal.dart b/lib/Animation_Gesture/page_reveal.dart
@@ -1,7 +1,8 @@
 import 'package:flutter/material.dart';
+import 'package:liquid_swipe/Clippers/CircularWave.dart';
+import 'package:liquid_swipe/Constants/Helpers.dart';
 
-import '../Constants/constants.dart';
-import '../WaveLayer.dart';
+import '../Clippers/WaveLayer.dart';
 
 /// This class reveals the next page in the liquid wave form.
 
@@ -10,26 +11,50 @@ class PageReveal extends StatelessWidget {
   final Widget child;
   final SlideDirection slideDirection;
   final double iconPosition;
+  final WaveType waveType;
 
   //Constructor
-  PageReveal({
-    this.revealPercent,
+  PageReveal({this.revealPercent,
     this.child,
     this.slideDirection,
-    this.iconPosition
-  });
+    this.iconPosition,
+    this.waveType });
 
   @override
   Widget build(BuildContext context) {
     //ClipPath clips our Container (page) with clipper based on path..
-    return new ClipPath(
-      clipper: new WaveLayer(
-          revealPercent: slideDirection == SlideDirection.leftToRight
-              ? 1.0 - revealPercent
-              : revealPercent,
-          slideDirection: slideDirection,
-          iconPosition: iconPosition),
-      child: child,
-    );
+    switch (waveType) {
+      case WaveType.liquidReveal:
+        return ClipPath(
+          clipper: WaveLayer(
+              revealPercent: slideDirection == SlideDirection.leftToRight
+                  ? 1.0 - revealPercent
+                  : revealPercent,
+              slideDirection: slideDirection,
+              iconPosition: iconPosition),
+          child: child,
+        );
+        break;
+      case WaveType.circularReveal:
+        return ClipPath(
+          clipper: CircularWave(iconPosition,
+              revealPercent: slideDirection == SlideDirection.leftToRight
+                  ? 1.0 - revealPercent
+                  : revealPercent),
+          child: child,
+        );
+        break;
+      default:
+        return ClipPath(
+          clipper: WaveLayer(
+              revealPercent: slideDirection == SlideDirection.leftToRight
+                  ? 1.0 - revealPercent
+                  : revealPercent,
+              slideDirection: slideDirection,
+              iconPosition: iconPosition),
+          child: child,
+        );
+        break;
+    }
   }
 }
diff --git a/lib/Clippers/CircularWave.dart b/lib/Clippers/CircularWave.dart
@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+
+/// Custom clipper for circular page reveal.
+/// Copied from IntroViews.See Credits in Readme.md
+
+class CircularWave extends CustomClipper<Path> {
+  final double revealPercent;
+  final double iconPosition;
+
+  CircularWave(this.iconPosition, {this.revealPercent});
+
+  @override
+  Path getClip(Size size) {
+    final center = new Offset(size.width, size.height * (iconPosition + 1) / 2);
+    final radius = 1000 * revealPercent;
+    final diameter = 2 * radius;
+    final path = Path();
+
+    path.lineTo(size.width, 0);
+    path.lineTo(size.width, size.height);
+    path.lineTo(0, size.height);
+
+    final rect = Rect.fromLTWH(
+        center.dx - radius, center.dy - radius, diameter, diameter);
+
+    ///Adding Oval with path.addOval() Makes the clipper totally inverse
+    ///So have to use addArc().It took me 3 hours to make this workaround, lol.
+    ///try to use addOval instead, and u will find the issue
+    path.addArc(rect, 90, -270);
+    return path;
+  }
+
+  @override
+  bool shouldReclip(CustomClipper<Path> oldClipper) {
+    return true;
+  }
+}
diff --git a/lib/WaveLayer.dart → lib/Clippers/WaveLayer.dart b/lib/WaveLayer.dart → lib/Clippers/WaveLayer.dart
@@ -1,7 +1,7 @@
 import 'dart:math';
 
 import 'package:flutter/material.dart';
-import 'package:liquid_swipe/Constants/constants.dart';
+import 'package:liquid_swipe/Constants/Helpers.dart';
 
 class WaveLayer extends CustomClipper<Path> {
   double revealPercent;
@@ -23,7 +23,10 @@ class WaveLayer extends CustomClipper<Path> {
     Path path = new Path();
     sideWidth = sidewidth(size);
     waveVertRadius = waveVertRadiusF(size);
+    //To range (-1,1) into (0,1) here (iconPosition + 1) / 2
+    // refer - https://stackoverflow.com/questions/929103/convert-a-number-range-to-another-range-maintaining-ratio
     waveCenterY = size.height * (iconPosition + 1) / 2;
+
     if (slideDirection == SlideDirection.leftToRight) {
       waveHorRadius = waveHorRadiusFBack(size);
     } else {

diff --git a/lib/Constants/constants.dart → lib/Constants/Helpers.dart b/lib/Constants/constants.dart → lib/Constants/Helpers.dart
@@ -22,3 +22,8 @@ enum TransitionGoal {
   open,
   close,
 }
+
+enum WaveType {
+  circularReveal,
+  liquidReveal
+}
diff --git a/lib/liquid_swipe.dart b/lib/liquid_swipe.dart
@@ -4,10 +4,10 @@ import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:liquid_swipe/Animation_Gesture/animated_page_dragger.dart';
 import 'package:liquid_swipe/Animation_Gesture/page_dragger.dart';
-import 'package:liquid_swipe/Constants/constants.dart';
 import 'package:liquid_swipe/page.dart';
 
 import 'Animation_Gesture/page_reveal.dart';
+import 'Constants/Helpers.dart';
 
 final key = new GlobalKey<_LiquidSwipe>();
 
@@ -19,6 +19,7 @@ class LiquidSwipe extends StatefulWidget {
   final Widget slideIconWidget;
   final double positionSlideIcon;
   final bool enableLoop;
+  final WaveType waveType;
 
   const LiquidSwipe({
     Key key,
@@ -29,6 +30,7 @@ class LiquidSwipe extends StatefulWidget {
     this.slideIconWidget = const Icon(Icons.arrow_back_ios),
     this.positionSlideIcon = 0.54,
     this.enableLoop = true,
+    this.waveType = WaveType.liquidReveal,
   })  : assert(pages != null),
         assert(fullTransitionValue != null),
         assert(initialPage != null &&
@@ -83,21 +85,34 @@ class _LiquidSwipe extends State<LiquidSwipe> with TickerProviderStateMixin {
           slideDirection = event.direction;
           slidePercent = event.slidePercent;
 
-          //conditions on slide direction
-          if (slideDirection == SlideDirection.leftToRight &&
-              activePageIndex != 0) {
-            nextPageIndex = activePageIndex - 1;
-          } else if (slideDirection == SlideDirection.rightToLeft &&
-              activePageIndex != widget.pages.length - 1) {
-            nextPageIndex = activePageIndex + 1;
-          } else {
-            nextPageIndex = activePageIndex;
-          }
+
           // making pages to be in loop
-          if (widget.enableLoop)
+          if (widget.enableLoop) {
+            //conditions on slide direction
+            if (slideDirection == SlideDirection.leftToRight) {
+              nextPageIndex = activePageIndex - 1;
+            } else if (slideDirection == SlideDirection.rightToLeft) {
+              nextPageIndex = activePageIndex + 1;
+            } else {
+              nextPageIndex = activePageIndex;
+            }
+
             if (nextPageIndex > widget.pages.length - 1)
               nextPageIndex = 0;
             else if (nextPageIndex < 0) nextPageIndex = widget.pages.length - 1;
+          } else {
+            //conditions on slide direction
+            if (slideDirection == SlideDirection.leftToRight &&
+                activePageIndex != 0) {
+              nextPageIndex = activePageIndex - 1;
+            } else if (slideDirection == SlideDirection.rightToLeft &&
+                activePageIndex != widget.pages.length - 1) {
+              nextPageIndex = activePageIndex + 1;
+            } else {
+              nextPageIndex = activePageIndex;
+            }
+          }
+
         }
         //if the user has done dragging
         else if (event.updateType == UpdateType.doneDragging) {
@@ -174,6 +189,7 @@ class _LiquidSwipe extends State<LiquidSwipe> with TickerProviderStateMixin {
                 percentVisible: slidePercent),
             slideDirection: slideDirection,
             iconPosition: widget.positionSlideIcon,
+            waveType: widget.waveType,
           ),
           PageDragger(
             //Used for gesture control
@@ -195,3 +211,4 @@ class _LiquidSwipe extends State<LiquidSwipe> with TickerProviderStateMixin {
     });
   }
 }
+