Added vertical slider support

xsahil03x · Oct 2, 2019 · f58cad8 · f58cad8
1 parent 906e2d7
commit f58cad8
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 49 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -22,14 +22,28 @@ class MyHomePage extends StatelessWidget {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: Text('Before After'), centerTitle: true),
-      body: Column(
-        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-        children: <Widget>[
-          BeforeAfter(
-            beforeImage: Image.asset('assets/after.jpg'),
-            afterImage: Image.asset('assets/before.jpg'),
-          ),
-        ],
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            Expanded(
+              flex: 1,
+              child: BeforeAfter(
+                beforeImage: Image.asset('assets/after.jpg'),
+                afterImage: Image.asset('assets/before.jpg'),
+                sliderOrientation: SliderOrientation.horizontal,
+              ),
+            ),
+            Expanded(
+              flex: 1,
+              child: BeforeAfter(
+                beforeImage: Image.asset('assets/after.jpg'),
+                afterImage: Image.asset('assets/before.jpg'),
+                sliderOrientation: SliderOrientation.vertical,
+              ),
+            ),
+          ],
+        ),
       ),
     );
   }

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -7,21 +7,21 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.2.0"
+    version: "2.3.0"
   before_after:
     dependency: "direct main"
     description:
       path: ".."
       relative: true
     source: path
-    version: "1.0.0"
+    version: "1.0.1"
   boolean_selector:
     dependency: transitive
     description:
       name: boolean_selector
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.4"
+    version: "1.0.5"
   charcode:
     dependency: transitive
     description:
@@ -66,28 +66,28 @@ packages:
       name: meta
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.6"
+    version: "1.1.7"
   path:
     dependency: transitive
     description:
       name: path
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.6.2"
+    version: "1.6.4"
   pedantic:
     dependency: transitive
     description:
       name: pedantic
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.7.0"
+    version: "1.8.0+1"
   quiver:
     dependency: transitive
     description:
       name: quiver
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.3"
+    version: "2.0.5"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -120,7 +120,7 @@ packages:
       name: string_scanner
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.4"
+    version: "1.0.5"
   term_glyph:
     dependency: transitive
     description:

diff --git a/lib/src/custom_widget.dart b/lib/src/custom_widget.dart
@@ -1,6 +1,8 @@
 import 'package:before_after/src/rect_clipper.dart';
 import 'package:flutter/material.dart';
 
+enum SliderOrientation { vertical, horizontal }
+
 class BeforeAfter extends StatefulWidget {
   final Widget beforeImage;
   final Widget afterImage;
@@ -10,19 +12,21 @@ class BeforeAfter extends StatefulWidget {
   final Color thumbColor;
   final double thumbRadius;
   final Color overlayColor;
-
-  const BeforeAfter({
-    Key key,
-    @required this.beforeImage,
-    @required this.afterImage,
-    this.imageHeight,
-    this.imageWidth,
-    this.imageCornerRadius = 8.0,
-    this.thumbColor = Colors.white,
-    this.thumbRadius = 16.0,
-    this.overlayColor,
-  })  : assert(beforeImage != null),
+  final SliderOrientation sliderOrientation;
+  const BeforeAfter(
+      {Key key,
+      @required this.beforeImage,
+      @required this.afterImage,
+      this.imageHeight,
+      this.imageWidth,
+      this.imageCornerRadius = 8.0,
+      this.thumbColor = Colors.white,
+      this.thumbRadius = 16.0,
+      this.overlayColor,
+      this.sliderOrientation = SliderOrientation.horizontal})
+      : assert(beforeImage != null),
         assert(afterImage != null),
+        assert(sliderOrientation != null),
         super(key: key);
 
   @override
@@ -31,13 +35,15 @@ class BeforeAfter extends StatefulWidget {
 
 class _BeforeAfterState extends State<BeforeAfter> {
   double _clipFactor = 0.5;
-
   @override
   Widget build(BuildContext context) {
     return Stack(
+      alignment: Alignment.center,
       children: <Widget>[
         Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 24.0),
+          padding: widget.sliderOrientation == SliderOrientation.vertical
+              ? const EdgeInsets.symmetric(vertical: 24.0)
+              : const EdgeInsets.symmetric(horizontal: 24.0),
           child: SizedImage(
             widget.afterImage,
             widget.imageHeight,
@@ -46,9 +52,13 @@ class _BeforeAfterState extends State<BeforeAfter> {
           ),
         ),
         Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 24.0),
+          padding: widget.sliderOrientation == SliderOrientation.vertical
+              ? const EdgeInsets.symmetric(vertical: 24.0)
+              : const EdgeInsets.symmetric(horizontal: 24.0),
           child: ClipPath(
-            clipper: RectClipper(_clipFactor),
+            clipper: widget.sliderOrientation == SliderOrientation.vertical
+                ? RectClipperVertical(_clipFactor)
+                : RectClipper(_clipFactor),
             child: SizedImage(
               widget.beforeImage,
               widget.imageHeight,
@@ -57,11 +67,7 @@ class _BeforeAfterState extends State<BeforeAfter> {
             ),
           ),
         ),
-        Positioned(
-          top: 0.0,
-          bottom: 0.0,
-          right: 0.0,
-          left: 0.0,
+        Positioned.fill(
           child: SliderTheme(
             data: SliderThemeData(
               overlayColor: widget.overlayColor,
@@ -70,11 +76,20 @@ class _BeforeAfterState extends State<BeforeAfter> {
               activeTrackColor: Colors.transparent,
               inactiveTrackColor: Colors.transparent,
             ),
-            child: Slider(
-              value: _clipFactor,
-              onChanged: (double factor) =>
-                  setState(() => this._clipFactor = factor),
-            ),
+            child: widget.sliderOrientation == SliderOrientation.vertical
+                ? RotatedBox(
+                    quarterTurns: 1,
+                    child: Slider(
+                      value: _clipFactor,
+                      onChanged: (double factor) =>
+                          setState(() => this._clipFactor = factor),
+                    ),
+                  )
+                : Slider(
+                    value: _clipFactor,
+                    onChanged: (double factor) =>
+                        setState(() => this._clipFactor = factor),
+                  ),
           ),
         ),
       ],

diff --git a/lib/src/rect_clipper.dart b/lib/src/rect_clipper.dart
@@ -18,3 +18,22 @@ class RectClipper extends CustomClipper<Path> {
   @override
   bool shouldReclip(CustomClipper<Path> oldClipper) => true;
 }
+
+class RectClipperVertical extends CustomClipper<Path> {
+  final double clipFactor;
+
+  RectClipperVertical(this.clipFactor);
+
+  @override
+  Path getClip(Size size) {
+    Path path = Path();
+    path.lineTo(0.0, size.height * clipFactor);
+    path.lineTo(size.width, size.height * clipFactor);
+    path.lineTo(size.width, 0.0);
+    path.close();
+    return path;
+  }
+
+  @override
+  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
+}
diff --git a/pubspec.lock b/pubspec.lock
@@ -7,14 +7,14 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.2.0"
+    version: "2.3.0"
   boolean_selector:
     dependency: transitive
     description:
       name: boolean_selector
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.4"
+    version: "1.0.5"
   charcode:
     dependency: transitive
     description:
@@ -52,28 +52,28 @@ packages:
       name: meta
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.6"
+    version: "1.1.7"
   path:
     dependency: transitive
     description:
       name: path
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.6.2"
+    version: "1.6.4"
   pedantic:
     dependency: transitive
     description:
       name: pedantic
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.7.0"
+    version: "1.8.0+1"
   quiver:
     dependency: transitive
     description:
       name: quiver
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.3"
+    version: "2.0.5"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -106,7 +106,7 @@ packages:
       name: string_scanner
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.4"
+    version: "1.0.5"
   term_glyph:
     dependency: transitive
     description: