Feature/back buttons

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.0.1-pre.2
+
+- Dialogs and pop buttons logic
+
 ## 0.0.1-pre.1
 
 - Refactoring

example/lib/src/common/router/routes.dart

@@ -11,7 +11,6 @@ import 'package:example/src/feature/shop/widget/catalog_screen.dart';
 import 'package:example/src/feature/shop/widget/category_screen.dart';
 import 'package:example/src/feature/shop/widget/checkout_screen.dart';
 import 'package:example/src/feature/shop/widget/favorites_screen.dart';
-import 'package:example/src/feature/shop/widget/product_image_screen.dart';
 import 'package:example/src/feature/shop/widget/product_screen.dart';
 import 'package:example/src/feature/shop/widget/shop_screen.dart';
 import 'package:flutter/material.dart';
@@ -25,7 +24,6 @@ enum Routes with OctopusRoute {
   catalog('catalog', title: 'Catalog'),
   category('category', title: 'Category'),
   product('product', title: 'Product'),
-  productImage('product-img-dialog', title: 'Product Image'),
   basket('basket', title: 'Basket'),
   checkout('checkout', title: 'Checkout'),
   favorites('favorites', title: 'Favorites'),
@@ -52,10 +50,6 @@ enum Routes with OctopusRoute {
         Routes.catalog => const CatalogScreen(),
         Routes.category => CategoryScreen(id: node.arguments['id']),
         Routes.product => ProductScreen(id: node.arguments['id']),
-        Routes.productImage => ProductImageScreen(
-            id: node.arguments['id'],
-            idx: node.arguments['idx'],
-          ),
         Routes.basket => const BasketScreen(),
         Routes.checkout => const CheckoutScreen(),
         Routes.favorites => const FavoritesScreen(),

example/lib/src/feature/account/widget/settings_dialog.dart

@@ -8,7 +8,7 @@ class SettingsDialog extends StatelessWidget {
   const SettingsDialog({super.key});
 
   @override
-  Widget build(BuildContext context) => AlertDialog(
+  Widget build(BuildContext context) => AlertDialog.adaptive(
         title: const Text('Settings'),
         content: const Text('Coming soon...'),
         actions: <Widget>[

example/lib/src/feature/home/widget/home_screen.dart

@@ -21,15 +21,113 @@ class HomeScreen extends StatelessWidget {
           child: ListView(
             padding: const EdgeInsets.all(16),
             children: <Widget>[
+              ListTile(
+                title: const Text('Gallery'),
+                subtitle: const Text('Simple navigation between screens'),
+                onTap: () => context.octopus.push(Routes.gallery),
+              ),
               ListTile(
                 title: const Text('Shop'),
                 subtitle: const Text('Explore nested navigation'),
                 onTap: () => context.octopus.push(Routes.shop),
               ),
               ListTile(
-                title: const Text('Gallery'),
-                subtitle: const Text('Gallery description'),
-                onTap: () => context.octopus.push(Routes.gallery),
+                title: const Text('Profile'),
+                subtitle: const Text('Profile with dialogs & anonymous routes'),
+                onTap: () => context.octopus.push(Routes.profile),
+              ),
+              const _ShowDialogExample(),
+            ],
+          ),
+        ),
+      );
+}
+
+class _ShowDialogExample extends StatefulWidget {
+  const _ShowDialogExample({
+    super.key, // ignore: unused_element
+  });
+
+  @override
+  State<_ShowDialogExample> createState() => _ShowDialogExampleState();
+}
+
+class _ShowDialogExampleState extends State<_ShowDialogExample> {
+  String? lastResult;
+
+  @override
+  Widget build(BuildContext context) => ListTile(
+        title: const Text('Show dialog'),
+        subtitle: Text(switch (lastResult) {
+          String text when text.isNotEmpty => 'Last result: $text',
+          _ => 'Show dialog and receive result',
+        }),
+        onTap: () => context.octopus
+            .showDialog<String>((context) => const _DialogExample())
+            .then<void>((value) => setState(() => lastResult = value)),
+      );
+}
+
+class _DialogExample extends StatefulWidget {
+  const _DialogExample({
+    super.key, // ignore: unused_element
+  });
+
+  @override
+  State<_DialogExample> createState() => _DialogExampleState();
+}
+
+class _DialogExampleState extends State<_DialogExample> {
+  final TextEditingController _controller = TextEditingController();
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) => AlertDialog.adaptive(
+        title: const Text('Dialog example'),
+        alignment: Alignment.center,
+        scrollable: false,
+        content: SingleChildScrollView(
+          scrollDirection: Axis.horizontal,
+          padding: const EdgeInsets.symmetric(horizontal: 8),
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              SizedBox(
+                width: 200,
+                height: 64,
+                child: TextField(
+                  controller: _controller,
+                  decoration:
+                      const InputDecoration(hintText: 'Enter some text'),
+                ),
+              ),
+              const SizedBox(width: 16),
+              IconButton(
+                icon: ValueListenableBuilder<TextEditingValue>(
+                  valueListenable: _controller,
+                  builder: (context, value, _) => AnimatedSwitcher(
+                    duration: const Duration(milliseconds: 250),
+                    transitionBuilder: (child, animation) => ScaleTransition(
+                      scale: animation,
+                      child: FadeTransition(
+                        opacity: animation,
+                        child: child,
+                      ),
+                    ),
+                    child: value.text.isEmpty
+                        ? const Icon(Icons.close, key: Key('close'))
+                        : const Icon(Icons.send, key: Key('send')),
+                  ),
+                ),
+                iconSize: 32,
+                onPressed: () => Navigator.maybePop(context, _controller.text),
               ),
             ],
           ),

example/lib/src/feature/shop/widget/basket_screen.dart

@@ -18,7 +18,7 @@ class BasketTab extends StatelessWidget {
   Widget build(BuildContext context) => BucketNavigator(
         bucket: '${ShopTabsEnum.basket}-tab',
         // Handles back button only if the current route is the basket screen
-        handlesBackButton: () =>
+        shouldHandleBackButton: (_) =>
             Octopus.instance.state.arguments['shop'] == 'basket',
       );
 }

example/lib/src/feature/shop/widget/catalog_screen.dart

@@ -25,7 +25,7 @@ class CatalogTab extends StatelessWidget {
   Widget build(BuildContext context) => BucketNavigator(
         bucket: '${ShopTabsEnum.catalog}-tab',
         // Handles back button only if the current route is the catalog screen
-        handlesBackButton: () =>
+        shouldHandleBackButton: (_) =>
             Octopus.instance.state.arguments['shop'] == 'catalog',
       );
 }

example/lib/src/feature/shop/widget/product_image_screen.dart

@@ -10,10 +10,10 @@ import 'package:photo_view/photo_view.dart';
 /// {@endtemplate}
 class ProductImageScreen extends StatelessWidget {
   /// {@macro photo_image_screen}
-  const ProductImageScreen({
+  const ProductImageScreen._({
     required this.id,
     required this.idx,
-    super.key,
+    super.key, // ignore: unused_element
   });
 
   /// Product id
@@ -27,21 +27,24 @@ class ProductImageScreen extends StatelessWidget {
     BuildContext context, {
     required ProductID id,
     required int index,
-  }) =>
-      Navigator.of(context, rootNavigator: true).push<void>(
-        PageRouteBuilder<void>(
-          pageBuilder: (context, _, __) =>
-              ProductImageScreen(id: id, idx: index),
-          transitionsBuilder: (context, animation, secondayAnimation, child) =>
-              ScaleTransition(
-            scale: Tween<double>(begin: 1.25, end: 1).animate(animation),
-            child: FadeTransition(
-              opacity: animation.drive(CurveTween(curve: Curves.easeIn)),
-              child: child,
-            ),
-          ),
+  }) {
+    final navigator = Navigator.of(context, rootNavigator: true);
+    final route = PageRouteBuilder<void>(
+      pageBuilder: (context, _, __) => BackButtonListener(
+        onBackButtonPressed: navigator.maybePop,
+        child: ProductImageScreen._(id: id, idx: index),
+      ),
+      transitionsBuilder: (context, animation, secondayAnimation, child) =>
+          ScaleTransition(
+        scale: Tween<double>(begin: 1.25, end: 1).animate(animation),
+        child: FadeTransition(
+          opacity: animation.drive(CurveTween(curve: Curves.easeIn)),
+          child: child,
         ),
-      );
+      ),
+    );
+    return navigator.push<void>(route);
+  }
 
   @override
   Widget build(BuildContext context) {

example/pubspec.lock

@@ -498,7 +498,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "0.0.1-pre.0"
+    version: "0.0.1-pre.1"
   package_config:
     dependency: transitive
     description:

lib/src/controller/controller.dart

@@ -1,7 +1,9 @@
 import 'dart:async';
 import 'dart:convert';
 
+import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
+import 'package:meta/meta.dart';
 import 'package:octopus/src/controller/config.dart';
 import 'package:octopus/src/controller/guard.dart';
 import 'package:octopus/src/controller/navigator/controller.dart';
@@ -168,4 +170,13 @@ abstract interface class Octopus {
 
   /// Update state arguments
   Future<void> setArguments(void Function(Map<String, String> args) change);
+
+  /// Show a dialog as a declarative page.
+  /// The dialog will be added to the navigation stack.
+  /// [arguments] - dialog arguments
+  @experimental
+  Future<T?> showDialog<T>(
+    WidgetBuilder builder, {
+    Map<String, String>? arguments,
+  });
 }

lib/src/controller/navigator/controller.dart

@@ -3,8 +3,8 @@ import 'dart:collection';
 import 'dart:convert';
 import 'dart:math' as math;
 
+import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
-import 'package:flutter/widgets.dart';
 import 'package:meta/meta.dart';
 import 'package:octopus/src/controller/config.dart';
 import 'package:octopus/src/controller/controller.dart';
@@ -105,20 +105,23 @@ final class Octopus$NavigatorImpl implements Octopus {
     required OctopusInformationParser routeInformationParser,
     required BackButtonDispatcher backButtonDispatcher,
     required OctopusStateObserver observer,
-  }) : config = OctopusConfig(
+  })  : config = OctopusConfig(
           routes: routes,
           routeInformationProvider: routeInformationProvider,
           routeInformationParser: routeInformationParser,
           routerDelegate: routerDelegate,
           backButtonDispatcher: backButtonDispatcher,
           observer: observer,
-        ) {
+        ),
+        _routerDelegate = routerDelegate {
     $octopusSingletonInstance = this;
   }
 
   @override
   final OctopusConfig config;
 
+  final OctopusDelegate$NavigatorImpl _routerDelegate;
+
   @override
   OctopusStateObserver get stateObserver => observer;
 
@@ -135,23 +138,23 @@ final class Octopus$NavigatorImpl implements Octopus {
   bool get isIdle => !isProcessing;
 
   @override
-  bool get isProcessing => config.routerDelegate.isProcessing;
+  bool get isProcessing => _routerDelegate.isProcessing;
 
   @override
-  Future<void> get processingCompleted =>
-      config.routerDelegate.processingCompleted;
+  Future<void> get processingCompleted => _routerDelegate.processingCompleted;
+
   @override
   OctopusRoute? getRouteByName(String name) => config.routes[name];
 
   @override
   Future<void> setState(
           OctopusState Function(OctopusState$Mutable state) change) =>
-      config.routerDelegate.setNewRoutePath(
+      _routerDelegate.setNewRoutePath(
           change(state.mutate()..intention = OctopusStateIntention.auto));
 
   @override
   Future<void> navigate(String location) =>
-      config.routerDelegate.setNewRoutePath(StateUtil.decodeLocation(location));
+      _routerDelegate.setNewRoutePath(StateUtil.decodeLocation(location));
 
   @override
   Future<OctopusNode?> pop() {
@@ -309,4 +312,11 @@ final class Octopus$NavigatorImpl implements Octopus {
     _txnQueue.add((change, priority));
     return completer.future;
   }
+
+  @override
+  Future<T?> showDialog<T>(
+    WidgetBuilder builder, {
+    Map<String, String>? arguments,
+  }) =>
+      _routerDelegate.showDialog<T>(builder, arguments: arguments);
 }