Merge pull request #59 from HeavenOSK/heavenosk/flutter-3

Update for Flutter V3 & Improve example
HeavenOSK · May 30, 2022 · 57e2e0c · 57e2e0c
2 parents 9ca8232 + 05b3789
commit 57e2e0c
Show file tree

Hide file tree

Showing 18 changed files with 288 additions and 137 deletions.
diff --git a/example/lib/examples/basic_example.dart b/example/lib/examples/basic_example.dart
@@ -1,6 +1,8 @@
 import 'package:example/widgets/bottom_buttons_row.dart';
 import 'package:example/widgets/card_overlay.dart';
 import 'package:example/widgets/example_card.dart';
+import 'package:example/widgets/fade_route.dart';
+import 'package:example/widgets/general_drawer.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:swipable_stack/swipable_stack.dart';
@@ -12,10 +14,10 @@ const _images = [
 ];
 
 class BasicExample extends StatefulWidget {
-  const BasicExample._({Key? key}) : super(key: key);
+  const BasicExample._();
 
   static Route<void> route() {
-    return MaterialPageRoute(
+    return FadeRoute(
       builder: (context) => const BasicExample._(),
     );
   }
@@ -48,6 +50,10 @@ class _BasicExampleState extends State<BasicExample> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      appBar: AppBar(
+        title: const Text('BasicExample'),
+      ),
+      drawer: const GeneralDrawer(),
       body: SafeArea(
         child: Stack(
           children: [

diff --git a/example/lib/examples/detectable_directions_example.dart b/example/lib/examples/detectable_directions_example.dart
@@ -1,6 +1,8 @@
 import 'package:example/widgets/bottom_buttons_row.dart';
 import 'package:example/widgets/card_overlay.dart';
 import 'package:example/widgets/example_card.dart';
+import 'package:example/widgets/fade_route.dart';
+import 'package:example/widgets/general_drawer.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:swipable_stack/swipable_stack.dart';
@@ -12,10 +14,10 @@ const _images = [
 ];
 
 class DetectableDirectionsExample extends StatefulWidget {
-  const DetectableDirectionsExample._({Key? key}) : super(key: key);
+  const DetectableDirectionsExample._();
 
   static Route<void> route() {
-    return MaterialPageRoute(
+    return FadeRoute(
       builder: (context) => const DetectableDirectionsExample._(),
     );
   }
@@ -50,6 +52,10 @@ class _DetectableDirectionsExampleState
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      appBar: AppBar(
+        title: const Text('DetectableDirectionsExample'),
+      ),
+      drawer: const GeneralDrawer(),
       body: SafeArea(
         child: Stack(
           children: [

diff --git a/example/lib/examples/ignore_vertical_swipe_example.dart b/example/lib/examples/ignore_vertical_swipe_example.dart
@@ -1,6 +1,8 @@
 import 'package:example/widgets/bottom_buttons_row.dart';
 import 'package:example/widgets/card_overlay.dart';
 import 'package:example/widgets/example_card.dart';
+import 'package:example/widgets/fade_route.dart';
+import 'package:example/widgets/general_drawer.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:swipable_stack/swipable_stack.dart';
@@ -12,10 +14,10 @@ const _images = [
 ];
 
 class IgnoreVerticalSwipeExample extends StatefulWidget {
-  const IgnoreVerticalSwipeExample._({Key? key}) : super(key: key);
+  const IgnoreVerticalSwipeExample._();
 
   static Route<void> route() {
-    return MaterialPageRoute(
+    return FadeRoute(
       builder: (context) => const IgnoreVerticalSwipeExample._(),
     );
   }
@@ -50,6 +52,10 @@ class _IgnoreVerticalSwipeExampleState
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      appBar: AppBar(
+        title: const Text('IgnoreVerticalSwipeExample'),
+      ),
+      drawer: const GeneralDrawer(),
       body: SafeArea(
         child: Stack(
           children: [

diff --git a/example/lib/examples/popup_on_swipe_example.dart b/example/lib/examples/popup_on_swipe_example.dart
@@ -1,6 +1,8 @@
 import 'package:example/widgets/bottom_buttons_row.dart';
 import 'package:example/widgets/card_overlay.dart';
 import 'package:example/widgets/example_card.dart';
+import 'package:example/widgets/fade_route.dart';
+import 'package:example/widgets/general_drawer.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:swipable_stack/swipable_stack.dart';
@@ -12,10 +14,10 @@ const _images = [
 ];
 
 class PopupOnSwipeExample extends StatefulWidget {
-  const PopupOnSwipeExample._({Key? key}) : super(key: key);
+  const PopupOnSwipeExample._();
 
   static Route<void> route() {
-    return MaterialPageRoute(
+    return FadeRoute(
       builder: (context) => const PopupOnSwipeExample._(),
     );
   }
@@ -49,6 +51,10 @@ class _PopupOnSwipeExampleState extends State<PopupOnSwipeExample> {
   Widget build(BuildContext context) {
     const pointCount = 0;
     return Scaffold(
+      appBar: AppBar(
+        title: const Text('PopupOnSwipeExample'),
+      ),
+      drawer: const GeneralDrawer(),
       body: SafeArea(
         child: Stack(
           children: [

diff --git a/example/lib/examples/swipe_anchor_example.dart b/example/lib/examples/swipe_anchor_example.dart
@@ -1,6 +1,8 @@
 import 'package:example/widgets/bottom_buttons_row.dart';
 import 'package:example/widgets/card_overlay.dart';
 import 'package:example/widgets/example_card.dart';
+import 'package:example/widgets/fade_route.dart';
+import 'package:example/widgets/general_drawer.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:swipable_stack/swipable_stack.dart';
@@ -12,10 +14,10 @@ const _images = [
 ];
 
 class SwipeAnchorExample extends StatefulWidget {
-  const SwipeAnchorExample._({Key? key}) : super(key: key);
+  const SwipeAnchorExample._();
 
   static Route<void> route() {
-    return MaterialPageRoute(
+    return FadeRoute(
       builder: (context) => const SwipeAnchorExample._(),
     );
   }
@@ -48,6 +50,10 @@ class _SwipeAnchorExampleState extends State<SwipeAnchorExample> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      appBar: AppBar(
+        title: const Text('SwipeAnchorExample'),
+      ),
+      drawer: const GeneralDrawer(),
       body: SafeArea(
         child: Stack(
           children: [

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -1,86 +1,116 @@
-import 'package:example/examples/basic_example.dart';
-import 'package:example/examples/detectable_directions_example.dart';
-import 'package:example/examples/ignore_vertical_swipe_example.dart';
-import 'package:example/examples/popup_on_swipe_example.dart';
-import 'package:example/examples/swipe_anchor_example.dart';
+import 'package:example/widgets/bottom_buttons_row.dart';
+import 'package:example/widgets/card_overlay.dart';
+import 'package:example/widgets/example_card.dart';
+import 'package:example/widgets/general_drawer.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:swipable_stack/swipable_stack.dart';
+
+const _images = [
+  'images/image_5.jpg',
+  'images/image_3.jpg',
+  'images/image_4.jpg',
+];
 
 void main() {
   WidgetsFlutterBinding.ensureInitialized();
   runApp(
-    const MyApp(),
+    MaterialApp(
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+        visualDensity: VisualDensity.adaptivePlatformDensity,
+      ),
+      home: const Home(),
+    ),
   );
 }
 
-class MyApp extends StatelessWidget {
-  const MyApp({Key? key}) : super(key: key);
+class Home extends StatefulWidget {
+  const Home({super.key});
+
+  @override
+  _HomeState createState() => _HomeState();
+}
+
+class _HomeState extends State<Home> {
+  late final SwipableStackController _controller;
+
+  void _listenController() => setState(() {});
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = SwipableStackController()..addListener(_listenController);
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    _controller
+      ..removeListener(_listenController)
+      ..dispose();
+  }
 
-  // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
-    return MaterialApp(
-      title: 'Flutter Demo',
-      theme: ThemeData(
-        primarySwatch: Colors.blue,
-        visualDensity: VisualDensity.adaptivePlatformDensity,
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('BasicExample'),
       ),
-      home: Builder(
-        builder: (context) {
-          return Scaffold(
-            appBar: AppBar(
-              title: const Text('swipable_stack demo'),
-            ),
-            body: ListView(
-              children: [
-                ListTile(
-                  title: const Text('BasicExample'),
-                  onTap: () {
-                    Navigator.push(
-                      context,
-                      BasicExample.route(),
-                    );
+      drawer: const GeneralDrawer(),
+      body: SafeArea(
+        top: false,
+        child: Stack(
+          children: [
+            Positioned.fill(
+              child: Padding(
+                padding: const EdgeInsets.all(8),
+                child: SwipableStack(
+                  detectableSwipeDirections: const {
+                    SwipeDirection.right,
+                    SwipeDirection.left,
                   },
-                ),
-                ListTile(
-                  title: const Text('IgnoreVerticalSwipeExample'),
-                  onTap: () {
-                    Navigator.push(
-                      context,
-                      IgnoreVerticalSwipeExample.route(),
-                    );
+                  controller: _controller,
+                  stackClipBehaviour: Clip.none,
+                  onSwipeCompleted: (index, direction) {
+                    if (kDebugMode) {
+                      print('$index, $direction');
+                    }
                   },
-                ),
-                ListTile(
-                  title: const Text('PopupOnSwipeExample'),
-                  onTap: () {
-                    Navigator.push(
-                      context,
-                      PopupOnSwipeExample.route(),
-                    );
-                  },
-                ),
-                ListTile(
-                  title: const Text('SwipeAnchorExample'),
-                  onTap: () {
-                    Navigator.push(
-                      context,
-                      SwipeAnchorExample.route(),
-                    );
-                  },
-                ),
-                ListTile(
-                  title: const Text('DetectableDirectionsExample'),
-                  onTap: () {
-                    Navigator.push(
-                      context,
-                      DetectableDirectionsExample.route(),
+                  horizontalSwipeThreshold: 0.8,
+                  verticalSwipeThreshold: 0.8,
+                  builder: (context, properties) {
+                    final itemIndex = properties.index % _images.length;
+
+                    return Stack(
+                      children: [
+                        ExampleCard(
+                          name: 'Sample No.${itemIndex + 1}',
+                          assetPath: _images[itemIndex],
+                        ),
+                        // more custom overlay possible than with overlayBuilder
+                        if (properties.stackIndex == 0 &&
+                            properties.direction != null)
+                          CardOverlay(
+                            swipeProgress: properties.swipeProgress,
+                            direction: properties.direction!,
+                          )
+                      ],
                     );
                   },
                 ),
-              ],
+              ),
+            ),
+            BottomButtonsRow(
+              onSwipe: (direction) {
+                _controller.next(swipeDirection: direction);
+              },
+              onRewindTap: _controller.rewind,
+              canRewind: _controller.canRewind,
             ),
-          );
-        },
+          ],
+        ),
       ),
     );
   }

diff --git a/example/lib/widgets/bottom_buttons_row.dart b/example/lib/widgets/bottom_buttons_row.dart
@@ -7,8 +7,8 @@ class BottomButtonsRow extends StatelessWidget {
     required this.onRewindTap,
     required this.onSwipe,
     required this.canRewind,
-    Key? key,
-  }) : super(key: key);
+    super.key,
+  });
 
   final bool canRewind;
   final VoidCallback onRewindTap;
@@ -26,7 +26,6 @@ class BottomButtonsRow extends StatelessWidget {
           height: height,
           child: Row(
             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-            crossAxisAlignment: CrossAxisAlignment.center,
             children: [
               _BottomButton(
                 color: canRewind ? Colors.amberAccent : Colors.grey,
@@ -74,8 +73,7 @@ class _BottomButton extends StatelessWidget {
     required this.onPressed,
     required this.child,
     required this.color,
-    Key? key,
-  }) : super(key: key);
+  });
 
   final VoidCallback? onPressed;
   final Icon child;

diff --git a/example/lib/widgets/card_label.dart b/example/lib/widgets/card_label.dart
@@ -11,8 +11,7 @@ class CardLabel extends StatelessWidget {
     required this.label,
     required this.angle,
     required this.alignment,
-    Key? key,
-  }) : super(key: key);
+  });
 
   factory CardLabel.right() {
     return const CardLabel._(

diff --git a/example/lib/widgets/card_overlay.dart b/example/lib/widgets/card_overlay.dart
@@ -8,8 +8,8 @@ class CardOverlay extends StatelessWidget {
   const CardOverlay({
     required this.direction,
     required this.swipeProgress,
-    Key? key,
-  }) : super(key: key);
+    super.key,
+  });
   final SwipeDirection direction;
   final double swipeProgress;