From 044da71e81e7a44aaa8c27279eb9997824dc99a8 Mon Sep 17 00:00:00 2001 From: fujidaiti Date: Wed, 14 Aug 2024 12:17:08 +0900 Subject: [PATCH 1/3] Fix: Keyboard visibility changes disrupt transition animation --- .../navigation/navigation_sheet_activity.dart | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/package/lib/src/navigation/navigation_sheet_activity.dart b/package/lib/src/navigation/navigation_sheet_activity.dart index 6f3eec85..4b55db0f 100644 --- a/package/lib/src/navigation/navigation_sheet_activity.dart +++ b/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 From b12d23177e9b64f5071fbd994dca625f86232388 Mon Sep 17 00:00:00 2001 From: fujidaiti Date: Wed, 14 Aug 2024 12:17:28 +0900 Subject: [PATCH 2/3] Add example of navigation sheet with keyboard --- .vscode/launch.json | 7 + .../navigation_sheet_and_keyboard.dart | 154 ++++++++++++++++++ 2 files changed, 161 insertions(+) create mode 100644 cookbook/lib/tutorial/navigation_sheet_and_keyboard.dart diff --git a/.vscode/launch.json b/.vscode/launch.json index 635b5dc9..7c68f216 100644 --- a/.vscode/launch.json +++ b/.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" } ] } diff --git a/cookbook/lib/tutorial/navigation_sheet_and_keyboard.dart b/cookbook/lib/tutorial/navigation_sheet_and_keyboard.dart new file mode 100644 index 00000000..34adb4c2 --- /dev/null +++ b/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'), + ), + ], + ), + ), + ); + } +} From a4c881a9b3dc842a074fdb428c4d762b137df0a9 Mon Sep 17 00:00:00 2001 From: fujidaiti Date: Wed, 14 Aug 2024 12:19:37 +0900 Subject: [PATCH 3/3] Bump to 0.9.2 --- package/CHANGELOG.md | 4 ++++ package/pubspec.yaml | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/package/CHANGELOG.md b/package/CHANGELOG.md index c4b46939..15964f7c 100644 --- a/package/CHANGELOG.md +++ b/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) diff --git a/package/pubspec.yaml b/package/pubspec.yaml index ef05a9e2..c21fbffe 100644 --- a/package/pubspec.yaml +++ b/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.