Flyout and tooltip position (#780)

bdlukaa · Mar 24, 2023 · 2bb4d60 · 2bb4d60
2 parents 3b783eb + cd1d161
commit 2bb4d60
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,6 +21,7 @@
 
 - `TabView` lazy loading ([#751](https://github.com/bdlukaa/fluent_ui/issues/751))
 - Added Bangla localization ([#786](https://github.com/bdlukaa/fluent_ui/pull/786))
+- Correctly position the flyouts on a multi navigator context ([#780](https://github.com/bdlukaa/fluent_ui/pull/780))
 
 ## 4.4.1
 

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -766,10 +766,10 @@ class _LinkPaneItemAction extends PaneItem {
   }
 }
 
-final _rootNavigatorKey = GlobalKey<NavigatorState>();
+final rootNavigatorKey = GlobalKey<NavigatorState>();
 final _shellNavigatorKey = GlobalKey<NavigatorState>();
 final router = GoRouter(
-  navigatorKey: _rootNavigatorKey,
+  navigatorKey: rootNavigatorKey,
   routes: [
     ShellRoute(
       navigatorKey: _shellNavigatorKey,

diff --git a/example/lib/screens/popups/flyout.dart b/example/lib/screens/popups/flyout.dart
@@ -1,3 +1,4 @@
+import 'package:example/main.dart';
 import 'package:example/theme.dart';
 import 'package:example/widgets/card_highlight.dart';
 import 'package:example/widgets/page.dart';
@@ -121,6 +122,7 @@ class _Flyout2ScreenState extends State<Flyout2Screen> with PageMixin {
                     barrierDismissible: barrierDismissible,
                     dismissOnPointerMoveAway: dismissOnPointerMoveAway,
                     dismissWithEsc: dismissWithEsc,
+                    navigatorKey: rootNavigatorKey.currentState,
                     builder: (context) {
                       return FlyoutContent(
                         child: Column(
@@ -181,6 +183,7 @@ class _Flyout2ScreenState extends State<Flyout2Screen> with PageMixin {
                     barrierDismissible: barrierDismissible,
                     dismissOnPointerMoveAway: dismissOnPointerMoveAway,
                     dismissWithEsc: dismissWithEsc,
+                    navigatorKey: rootNavigatorKey.currentState,
                     builder: (context) {
                       return MenuFlyout(
                         items: [
@@ -262,12 +265,23 @@ class _Flyout2ScreenState extends State<Flyout2Screen> with PageMixin {
         ),
         CardHighlight(
           codeSnippet: '''final contextController = FlyoutController();
+final contextAttachKey = GlobalKey();
 
 return GestureDetector(
   onSecondaryTapUp: (d) {
+
+    // This calculates the position of the flyout according to the parent navigator
+    final targetContext = contextAttachKey.currentContext;
+    if (targetContext == null) return;
+    final box = targetContext.findRenderObject() as RenderBox;
+    final position = box.localToGlobal(
+      d.localPosition,
+      ancestor: Navigator.of(context).context.findRenderObject(),
+    );
+
     contextController.showFlyout(
       barrierColor: Colors.black.withOpacity(0.1),
-      position: d.globalPosition,
+      position: position,
       builder: (context) {
         return FlyoutContent(
           child: SizedBox(
@@ -307,16 +321,26 @@ return GestureDetector(
     );
   },
   child: FlyoutTarget(
+    key: contextAttachKey,
     controller: contextController,
     child: const FlutterLogo(size: 400.0),
   ),
 );
 ''',
           child: GestureDetector(
             onSecondaryTapUp: (d) {
+              final targetContext = contextAttachKey.currentContext;
+              if (targetContext == null) return;
+
+              final box = targetContext.findRenderObject() as RenderBox;
+              final position = box.localToGlobal(
+                d.localPosition,
+                ancestor: Navigator.of(context).context.findRenderObject(),
+              );
+
               contextController.showFlyout(
                 barrierColor: Colors.black.withOpacity(0.1),
-                position: d.globalPosition,
+                position: position,
                 builder: (context) {
                   return FlyoutContent(
                     child: SizedBox(

diff --git a/lib/src/controls/flyouts/flyout.dart b/lib/src/controls/flyouts/flyout.dart
@@ -575,12 +575,16 @@ class FlyoutController with ChangeNotifier {
 
       final targetBox = context.findRenderObject() as RenderBox;
       targetSize = targetBox.size;
-      targetOffset =
-          targetBox.localToGlobal(Offset.zero, ancestor: navigatorBox) +
-              Offset(0, targetSize.height);
-      targetRect =
-          targetBox.localToGlobal(Offset.zero, ancestor: navigatorBox) &
-              targetSize;
+      targetOffset = targetBox.localToGlobal(
+            Offset.zero,
+            ancestor: navigatorBox,
+          ) +
+          Offset(0, targetSize.height);
+      targetRect = targetBox.localToGlobal(
+            Offset.zero,
+            ancestor: navigatorBox,
+          ) &
+          targetSize;
     }
 
     _open = true;

diff --git a/lib/src/controls/flyouts/menu.dart b/lib/src/controls/flyouts/menu.dart
@@ -439,11 +439,15 @@ class _MenuFlyoutSubItemState extends State<_MenuFlyoutSubItem>
   }
 
   void show(MenuInfoProviderState menuInfo) {
-    final itemBox = context.findRenderObject() as RenderBox;
-    final itemRect = itemBox.localToGlobal(Offset.zero) & itemBox.size;
-
     final parent = Flyout.of(context);
 
+    final itemBox = context.findRenderObject() as RenderBox;
+    final itemRect = itemBox.localToGlobal(
+          Offset.zero,
+          ancestor: parent.widget.root?.context.findRenderObject(),
+        ) &
+        itemBox.size;
+
     menuInfo.add(
       CustomSingleChildLayout(
         delegate: _SubItemPositionDelegate(
@@ -457,6 +461,7 @@ class _MenuFlyoutSubItemState extends State<_MenuFlyoutSubItem>
           additionalOffset: parent.additionalOffset,
           margin: parent.margin,
           transitionDuration: parent.transitionDuration,
+          root: parent.widget.root,
           builder: (context) {
             return FadeTransition(
               opacity: transitionController,