feat: show modal instead screen

ice-blockchain · Jan 8, 2025 · 731ca2e · 731ca2e
1 parent fae88a0
commit 731ca2e
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 54 deletions.
diff --git a/lib/app/features/debug/views/debug_page.dart b/lib/app/features/debug/views/debug_page.dart
@@ -2,8 +2,10 @@
 
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:ion/app/extensions/extensions.dart';
 import 'package:ion/app/features/core/providers/feature_flags_provider.c.dart';
 import 'package:ion/app/router/components/navigation_app_bar/navigation_app_bar.dart';
+import 'package:ion/app/router/components/navigation_app_bar/navigation_close_button.dart';
 import 'package:ion/app/services/logger/logger.dart';
 import 'package:talker_flutter/talker_flutter.dart';
 
@@ -14,49 +16,58 @@ class DebugPage extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final featureFlags = ref.watch(featureFlagsProvider);
 
-    return Scaffold(
-      appBar: NavigationAppBar.screen(
-        title: const Text('🐞 Debug'),
-      ),
-      body: Padding(
-        padding: const EdgeInsets.all(16),
-        child: ListView(
-          children: [
-            Card(
-              child: ListTile(
-                leading: const Icon(Icons.bug_report),
-                title: const Text('View Debug Logs'),
-                subtitle: const Text('Check application logs and diagnostics'),
-                trailing: const Icon(Icons.chevron_right),
-                onTap: () => Navigator.of(context).push(
-                  MaterialPageRoute<TalkerScreen>(
-                    builder: (context) => TalkerScreen(
-                      talker: Logger.talker,
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        NavigationAppBar.modal(
+          title: const Text('🐞 Debug'),
+          showBackButton: false,
+          actions: const [NavigationCloseButton()],
+        ),
+        Flexible(
+          child: Padding(
+            padding: const EdgeInsets.all(16),
+            child: ListView(
+              shrinkWrap: true,
+              children: [
+                Card(
+                  child: ListTile(
+                    leading: const Icon(Icons.bug_report),
+                    title: const Text('View Debug Logs'),
+                    subtitle: const Text('Check application logs and diagnostics'),
+                    trailing: const Icon(Icons.chevron_right),
+                    onTap: () => Navigator.of(context).push(
+                      MaterialPageRoute<TalkerScreen>(
+                        builder: (context) => TalkerScreen(
+                          talker: Logger.talker,
+                        ),
+                      ),
                     ),
                   ),
                 ),
-              ),
-            ),
-            ExpansionTile(
-              title: const Text('Feature Flags'),
-              children: featureFlags.entries
-                  .map(
-                    (entry) => Padding(
-                      padding: const EdgeInsets.symmetric(vertical: 4),
-                      child: ListTile(
-                        title: Text(entry.key.key),
-                        trailing: Icon(
-                          entry.value ? Icons.check_circle : Icons.cancel,
-                          color: entry.value ? Colors.green : Colors.red,
+                SizedBox(height: 16.0.s),
+                ExpansionTile(
+                  title: const Text('Feature Flags'),
+                  children: featureFlags.entries
+                      .map(
+                        (entry) => Padding(
+                          padding: const EdgeInsets.symmetric(vertical: 4),
+                          child: ListTile(
+                            title: Text(entry.key.key),
+                            trailing: Icon(
+                              entry.value ? Icons.check_circle : Icons.cancel,
+                              color: entry.value ? Colors.green : Colors.red,
+                            ),
+                          ),
                         ),
-                      ),
-                    ),
-                  )
-                  .toList(),
+                      )
+                      .toList(),
+                ),
+              ],
             ),
-          ],
+          ),
         ),
-      ),
+      ],
     );
   }
 }
diff --git a/lib/app/features/debug/views/debug_shake_gesture.dart b/lib/app/features/debug/views/debug_shake_gesture.dart
@@ -1,12 +1,14 @@
 // SPDX-License-Identifier: ice License 1.0
 
 import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:ion/app/features/core/providers/env_provider.c.dart';
 import 'package:ion/app/features/debug/views/debug_page.dart';
+import 'package:ion/app/router/utils/show_simple_bottom_sheet.dart';
 import 'package:shake_gesture/shake_gesture.dart';
 
-class DebugShakeGesture extends ConsumerWidget {
+class DebugShakeGesture extends HookConsumerWidget {
   const DebugShakeGesture({
     required this.child,
     super.key,
@@ -18,21 +20,30 @@ class DebugShakeGesture extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final showDebugInfo = ref.read(envProvider.notifier).get<bool>(EnvVariable.SHOW_DEBUG_INFO);
 
-    return showDebugInfo
-        ? Navigator(
-            onGenerateRoute: (settings) => MaterialPageRoute(
-              builder: (context) => ShakeGesture(
-                onShake: () {
-                  Navigator.of(context).push(
-                    MaterialPageRoute<DebugPage>(
-                      builder: (context) => const DebugPage(),
-                    ),
-                  );
-                },
-                child: child,
-              ),
-            ),
-          )
-        : child;
+    if (!showDebugInfo) return child;
+
+    final isSheetOpen = useState(false);
+
+    return Navigator(
+      onGenerateRoute: (settings) => MaterialPageRoute(
+        builder: (context) => ShakeGesture(
+          onShake: () {
+            if (isSheetOpen.value) return;
+
+            isSheetOpen.value = true;
+            showSimpleBottomSheet<void>(
+              context: context,
+              child: const DebugPage(),
+              onPopInvokedWithResult: (didPop, _) {
+                if (didPop) {
+                  isSheetOpen.value = false;
+                }
+              },
+            );
+          },
+          child: child,
+        ),
+      ),
+    );
   }
 }
diff --git a/lib/app/router/utils/show_simple_bottom_sheet.dart b/lib/app/router/utils/show_simple_bottom_sheet.dart
@@ -9,6 +9,7 @@ Future<T?> showSimpleBottomSheet<T>({
   required Widget child,
   bool useRootNavigator = true,
   bool isDismissible = true,
+  PopInvokedWithResultCallback<T>? onPopInvokedWithResult,
 }) {
   return showModalBottomSheet<T>(
     useRootNavigator: useRootNavigator,
@@ -20,6 +21,7 @@ Future<T?> showSimpleBottomSheet<T>({
     builder: (context) {
       return PopScope(
         canPop: isDismissible,
+        onPopInvokedWithResult: onPopInvokedWithResult,
         child: Column(
           mainAxisSize: MainAxisSize.min,
           mainAxisAlignment: MainAxisAlignment.end,