Fix: Keyboard visibility changes disrupt route transition animation i…

…n NavigationSheet (#215)

## Fixes / Closes (optional)

- Fixes #195

## Description

Added handling logic for the software keyboard overlay on the navigation
sheet.

## Summary (check all that apply)

- [x] Modified / added code
- [ ] Modified / added tests
- [x] Modified / added examples
- [ ] Modified / added others (pubspec.yaml, workflows, etc...)
- [ ] Updated README
- [ ] Contains breaking changes
  - [ ] Created / updated migration guide
- [x] Incremented version number
  - [x] Updated CHANGELOG

.vscode/launch.json

@@ -136,6 +136,13 @@
       "type": "dart",
       "program": "lib/tutorial/keyboard_dismiss_behavior.dart",
       "cwd": "./cookbook"
+    },
+    {
+      "name": "Navigation Sheet and Keyboard",
+      "request": "launch",
+      "type": "dart",
+      "program": "lib/tutorial/navigation_sheet_and_keyboard.dart",
+      "cwd": "./cookbook"
     }
   ]
 }

cookbook/lib/tutorial/navigation_sheet_and_keyboard.dart

@@ -0,0 +1,154 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:smooth_sheets/smooth_sheets.dart';
+
+void main() {
+  runApp(MaterialApp.router(routerConfig: _router));
+}
+
+final _transitionObserver = NavigationSheetTransitionObserver();
+
+final _router = GoRouter(
+  routes: [
+    GoRoute(
+      path: '/',
+      builder: (context, state) => const _Home(),
+      routes: [
+        ShellRoute(
+          observers: [_transitionObserver],
+          pageBuilder: (context, state, child) {
+            return ModalSheetPage(
+              child: _MySheet(
+                transitionObserver: _transitionObserver,
+                navigator: child,
+              ),
+            );
+          },
+          routes: [
+            GoRoute(
+              path: 'a',
+              pageBuilder: (context, state) {
+                return DraggableNavigationSheetPage(
+                  key: state.pageKey,
+                  child: const _EditablePageContent(
+                    height: 600,
+                    nextLocation: '/a/b',
+                    autofocus: true,
+                  ),
+                );
+              },
+              routes: [
+                GoRoute(
+                  path: 'b',
+                  pageBuilder: (context, state) {
+                    return DraggableNavigationSheetPage(
+                      key: state.pageKey,
+                      child: const _EditablePageContent(
+                        height: 300,
+                        nextLocation: '/a/b/c',
+                        autofocus: true,
+                      ),
+                    );
+                  },
+                  routes: [
+                    GoRoute(
+                      path: 'c',
+                      pageBuilder: (context, state) {
+                        return DraggableNavigationSheetPage(
+                          key: state.pageKey,
+                          child: const _EditablePageContent(
+                            nextLocation: '/',
+                            height: double.infinity,
+                            autofocus: false,
+                          ),
+                        );
+                      },
+                    ),
+                  ],
+                ),
+              ],
+            ),
+          ],
+        ),
+      ],
+    ),
+  ],
+);
+
+class _Home extends StatelessWidget {
+  const _Home();
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Home'),
+      ),
+      body: Center(
+        child: ElevatedButton(
+          onPressed: () {
+            GoRouter.of(context).go('/a');
+          },
+          child: const Text('Open Sheet'),
+        ),
+      ),
+    );
+  }
+}
+
+class _MySheet extends StatelessWidget {
+  const _MySheet({
+    required this.transitionObserver,
+    required this.navigator,
+  });
+
+  final NavigationSheetTransitionObserver transitionObserver;
+  final Widget navigator;
+
+  @override
+  Widget build(BuildContext context) {
+    return NavigationSheet(
+      transitionObserver: transitionObserver,
+      child: ColoredBox(
+        color: Colors.white,
+        child: navigator,
+      ),
+    );
+  }
+}
+
+class _EditablePageContent extends StatelessWidget {
+  const _EditablePageContent({
+    required this.nextLocation,
+    required this.autofocus,
+    required this.height,
+  });
+
+  final double height;
+  final String nextLocation;
+  final bool autofocus;
+
+  @override
+  Widget build(BuildContext context) {
+    return SheetContentScaffold(
+      body: SizedBox(
+        height: height,
+        child: Column(
+          children: [
+            TextField(
+              autofocus: autofocus,
+            ),
+            ElevatedButton(
+              onPressed: () => context.go(nextLocation),
+              child: const Text('Next'),
+            ),
+            TextButton(
+              onPressed: () => Navigator.pop(context),
+              child: const Text('Back'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.9.2 Aug 14, 2024
+
+- Fix: Keyboard visibility changes disrupt route transition animation in NavigationSheet (#215)
+
 ## 0.9.1 Jul 30, 2024
 
 - Fix: Sometimes touch is ignored when scrollable sheet reaches edge (#209)

package/lib/src/navigation/navigation_sheet_activity.dart

@@ -58,6 +58,24 @@ class TransitionSheetActivity extends NavigationSheetActivity {
       owner.setPixels(lerpDouble(startPixels, endPixels, fraction)!);
     }
   }
+
+  @override
+  void didFinalizeDimensions(
+    Size? oldContentSize,
+    Size? oldViewportSize,
+    EdgeInsets? oldViewportInsets,
+  ) {
+    // Appends the delta of the bottom inset (typically the keyboard height)
+    // to keep the visual sheet position unchanged.
+    final newInsets = owner.metrics.viewportInsets;
+    final oldInsets = oldViewportInsets ?? newInsets;
+    final deltaInsetBottom = newInsets.bottom - oldInsets.bottom;
+    if (deltaInsetBottom != 0) {
+      owner
+        ..setPixels(owner.metrics.pixels - deltaInsetBottom)
+        ..didUpdateMetrics();
+    }
+  }
 }
 
 @internal

package/pubspec.yaml

@@ -1,6 +1,6 @@
 name: smooth_sheets
 description: Sheet widgets with smooth motion and great flexibility. Also supports nested navigation in both imperative and declarative ways.
-version: 0.9.1
+version: 0.9.2
 repository: https://github.com/fujidaiti/smooth_sheets
 screenshots:
   - description: Practical examples of smooth_sheets.