Add SwipeablePage; Go Router example

Closes: #29

README.md

@@ -25,10 +25,30 @@ You can get the [`SwipeablePageRoute`] wrapping your current page using `context
 
 > To use swipeable pages with a [`PageTransitionsTheme`], use [`SwipeablePageTransitionsBuilder`].
 >
-> ⚠️ [`SwipeablePageTransitionsBuilder`] *must* be set for [`TargetPlatform.iOS`].
+> ⚠️ [`SwipeablePageTransitionsBuilder`] _must_ be set for [`TargetPlatform.iOS`].
 > For all other platforms, you can decide whether you want to use it.
 > This is because [`PageTransitionsTheme`] uses the builder for iOS whenever a pop gesture is in progress.
 
+### Usage with Go Router
+
+To use swipeable pages with Flutter's [<kbd>Go Router</kbd>], use [`SwipeablePage`] and the `pageBuilder` parameter in [`GoRoute`] instead of `builder`:
+
+```dart
+// Before, without swipeable pages:
+GoRoute(
+  builder: (context, state) => const MyScreen(),
+  // ...
+)
+
+// After, with swipeable pages:
+GoRoute(
+  pageBuilder: (context, state) => SwipeablePage(
+    builder: (context) => MyScreen(),
+  ),
+  // ...
+)
+```
+
 ## [`MorphingAppBar`] & [`MorphingSliverAppBar`]
 
 As you can see in the demo above, there's a beautiful animation happening to the AppBar. That's a [`MorphingAppBar`]!
@@ -77,6 +97,8 @@ Navigator(
 
 To animate additions, removals, and constants in your `AppBar`s `actions`, we compare them using [`Widget.canUpdate(Widget old, Widget new)`]. It compares `Widget`s based on their type and `key`, so it's recommended to give every action `Widget` a key (that you reuse across pages) for correct animations.
 
+[<kbd>Go Router</kbd>]: https://pub.dev/packages/go_router
+[`GoRoute`]: https://pub.dev/documentation/go_router/latest/go_router/GoRoute-class.html
 <!-- Flutter -->
 [`CupertinoPageRoute`]: https://api.flutter.dev/flutter/cupertino/CupertinoPageRoute-class.html
 [`Hero`]: https://api.flutter.dev/flutter/widgets/Hero-class.html
@@ -88,5 +110,6 @@ To animate additions, removals, and constants in your `AppBar`s `actions`, we co
 <!-- swipeable_page_route -->
 [`MorphingAppBar`]: https://pub.dev/documentation/swipeable_page_route/latest/swipeable_page_route/MorphingAppBar-class.html
 [`MorphingSliverAppBar`]: https://pub.dev/documentation/swipeable_page_route/latest/swipeable_page_route/MorphingSliverAppBar-class.html
+[`SwipeablePage`]: https://pub.dev/documentation/swipeable_page_route/latest/swipeable_page_route/SwipeablePage-class.html
 [`SwipeablePageRoute`]: https://pub.dev/documentation/swipeable_page_route/latest/swipeable_page_route/SwipeablePageRoute-class.html
 [`SwipeablePageTransitionsBuilder`]: https://pub.dev/documentation/swipeable_page_route/latest/swipeable_page_route/SwipeablePageTransitionsBuilder-class.html

example/lib/main.dart

@@ -1,25 +1,65 @@
-import 'package:black_hole_flutter/black_hole_flutter.dart';
 import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
 import 'package:swipeable_page_route/swipeable_page_route.dart';
 
 void main() => runApp(MyApp());
 
+enum NavigationMode {
+  navigator,
+  goRouter;
+
+  /// Change this value to switch between the two navigation modes.
+  static const current = NavigationMode.navigator;
+}
+
 class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
-    return MaterialApp(
-      title: '🔙 swipeable_page_route example',
-      theme: ThemeData(
-        appBarTheme: const AppBarTheme(
-          color: Colors.green,
-          foregroundColor: Colors.white,
-        ),
+    final theme = ThemeData(
+      appBarTheme: const AppBarTheme(
+        color: Colors.green,
+        foregroundColor: Colors.white,
       ),
-      home: FirstPage(),
     );
+
+    return switch (NavigationMode.current) {
+      NavigationMode.navigator => MaterialApp(
+          title: '🔙 swipeable_page_route example',
+          theme: theme,
+          home: FirstPage(),
+        ),
+      NavigationMode.goRouter => MaterialApp.router(
+          title: '🔙 swipeable_page_route example',
+          theme: theme,
+          routerConfig: goRouter,
+        ),
+    };
   }
 }
 
+final goRouter = GoRouter(
+  routes: [
+    GoRoute(
+      path: '/',
+      pageBuilder: (context, state) => SwipeablePage(
+        builder: (context) => FirstPage(),
+      ),
+    ),
+    GoRoute(
+      path: '/page2',
+      pageBuilder: (context, state) => SwipeablePage(
+        builder: (context) => SecondPage(),
+      ),
+    ),
+    GoRoute(
+      path: '/page3',
+      pageBuilder: (context, state) => SwipeablePage(
+        builder: (context) => ThirdPage(),
+      ),
+    ),
+  ],
+);
+
 class FirstPage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
@@ -29,13 +69,20 @@ class FirstPage extends StatelessWidget {
       ),
       body: Center(
         child: ElevatedButton(
-          onPressed: () async => context.navigator
-              .push<void>(SwipeablePageRoute(builder: (_) => SecondPage())),
+          onPressed: () async => _pushSecondPage(context),
           child: const Text('Open page 2'),
         ),
       ),
     );
   }
+
+  Future<void> _pushSecondPage(BuildContext context) async {
+    return switch (NavigationMode.current) {
+      NavigationMode.navigator => Navigator.of(context)
+          .push<void>(SwipeablePageRoute(builder: (_) => SecondPage())),
+      NavigationMode.goRouter => GoRouter.of(context).push<void>('/page2'),
+    };
+  }
 }
 
 class SecondPage extends StatefulWidget {
@@ -98,20 +145,22 @@ class _SecondPageState extends State<SecondPage> {
             ),
             const SizedBox(height: 32),
             ElevatedButton(
-              onPressed: () async {
-                await context.navigator.push<void>(SwipeablePageRoute(
-                  // You can customize the width of the detection area with
-                  // `backGestureDetectionWidth`.
-                  builder: (_) => ThirdPage(),
-                ));
-              },
+              onPressed: () async => _pushThirdPage(context),
               child: const Text('Open page 3'),
             ),
           ],
         ),
       ),
     );
   }
+
+  Future<void> _pushThirdPage(BuildContext context) async {
+    return switch (NavigationMode.current) {
+      NavigationMode.navigator => Navigator.of(context)
+          .push<void>(SwipeablePageRoute(builder: (_) => ThirdPage())),
+      NavigationMode.goRouter => GoRouter.of(context).push<void>('/page3'),
+    };
+  }
 }
 
 class ThirdPage extends StatefulWidget {
@@ -189,11 +238,7 @@ class _ThirdPageState extends State<ThirdPage>
               children: [
                 Text('This is tab ${i + 1}'),
                 ElevatedButton(
-                  onPressed: () async {
-                    await context.navigator.push<void>(
-                      SwipeablePageRoute(builder: (_) => SecondPage()),
-                    );
-                  },
+                  onPressed: () async => _pushSecondPage(context),
                   child: const Text('Open page 2'),
                 ),
               ],
@@ -202,4 +247,12 @@ class _ThirdPageState extends State<ThirdPage>
       ),
     );
   }
+
+  Future<void> _pushSecondPage(BuildContext context) async {
+    return switch (NavigationMode.current) {
+      NavigationMode.navigator => Navigator.of(context)
+          .push<void>(SwipeablePageRoute(builder: (_) => SecondPage())),
+      NavigationMode.goRouter => GoRouter.of(context).push<void>('/page2'),
+    };
+  }
 }

example/pubspec.lock

@@ -239,6 +239,11 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.0.3"
+  flutter_web_plugins:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
   freezed_annotation:
     dependency: transitive
     description:
@@ -255,6 +260,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.2"
+  go_router:
+    dependency: "direct main"
+    description:
+      name: go_router
+      sha256: ca7e4a2249f96773152f1853fa25933ac752495cdd7fdf5dafb9691bd05830fd
+      url: "https://pub.dev"
+    source: hosted
+    version: "13.0.0"
   html:
     dependency: transitive
     description:
@@ -311,6 +324,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.0.1"
+  logging:
+    dependency: transitive
+    description:
+      name: logging
+      sha256: "623a88c9594aa774443aa3eb2d41807a48486b5613e67599fb4c41c0ad47c340"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.0"
   material_color_utilities:
     dependency: transitive
     description:

example/pubspec.yaml

@@ -8,6 +8,7 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  go_router: ^13.0.0
   swipeable_page_route:
     path: ../