Add Flyout.navigatorKey (Fixes #538)

A key to the navigator used to show the flyout. Usually provided when the Flyout if off the scope of a [Navigator]. If null, [Navigator.of] is used

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - `FlyoutListTile` can be used outside of a flyout ([#650](https://github.com/bdlukaa/fluent_ui/issues/650))
 - Add uk localization ([#647](https://github.com/bdlukaa/fluent_ui/pull/647))
+- Add `Flyout.navigatorKey` ([#538](https://github.com/bdlukaa/fluent_ui/issues/538))
 
 ## 4.1.2
 

lib/fluent_ui.dart

@@ -107,4 +107,4 @@ export 'src/styles/focus.dart';
 export 'src/utils/horizontal_scroll_view.dart';
 export 'src/utils/label.dart';
 
-export 'src/utils/popup.dart';
+export 'src/utils/popup.dart' show showMenu, ContentManager, ContentSizeInfo;

lib/src/controls/surfaces/flyout/flyout.dart

@@ -1,6 +1,7 @@
 import 'dart:async';
 
 import 'package:fluent_ui/fluent_ui.dart';
+import 'package:fluent_ui/src/utils/popup.dart';
 import 'package:flutter/foundation.dart';
 
 export 'controller.dart';
@@ -96,6 +97,7 @@ class Flyout extends StatefulWidget {
     this.longHoverDuration = kDefaultLongHoverDuration,
     this.onOpen,
     this.onClose,
+    this.navigatorKey,
   }) : super(key: key);
 
   /// The child that will be attached to the flyout.
@@ -148,6 +150,13 @@ class Flyout extends StatefulWidget {
   /// Called when the flyout is closed, either by [controller] or by the user
   final VoidCallback? onClose;
 
+  /// A key to the navigator used to show the flyout.
+  ///
+  /// Usually provided when the Flyout if off the scope of a [Navigator].
+  ///
+  /// If null, [Navigator.of] is used
+  final NavigatorKey? navigatorKey;
+
   @override
   _FlyoutState createState() => _FlyoutState();
 
@@ -250,6 +259,7 @@ class _FlyoutState extends State<Flyout> {
       horizontalOffset: widget.horizontalOffset,
       placement: widget.placement,
       position: widget.position,
+      navigatorKey: widget.navigatorKey,
       child: widget.child,
     );
 

lib/src/utils/popup.dart

@@ -85,6 +85,8 @@ Future<T?> showMenu<T>({
   ));
 }
 
+typedef NavigatorKey = GlobalKey<NavigatorState>;
+
 class PopUp<T> extends StatefulWidget {
   const PopUp({
     Key? key,
@@ -94,6 +96,7 @@ class PopUp<T> extends StatefulWidget {
     this.horizontalOffset = 0,
     this.placement = FlyoutPlacement.center,
     this.position = FlyoutPosition.above,
+    this.navigatorKey,
   }) : super(key: key);
 
   final Widget child;
@@ -104,6 +107,8 @@ class PopUp<T> extends StatefulWidget {
   final FlyoutPlacement placement;
   final FlyoutPosition position;
 
+  final NavigatorKey? navigatorKey;
+
   @override
   PopUpState<T> createState() => PopUpState<T>();
 }
@@ -113,7 +118,8 @@ class PopUpState<T> extends State<PopUp<T>> {
 
   Future<void> openPopup() {
     assert(_dropdownRoute == null, 'You can NOT open a popup twice');
-    final NavigatorState navigator = Navigator.of(context);
+    final NavigatorState navigator =
+        widget.navigatorKey?.currentState ?? Navigator.of(context);
     final RenderBox itemBox = context.findRenderObject()! as RenderBox;
     Offset leftTarget = itemBox.localToGlobal(
       itemBox.size.centerLeft(Offset.zero),