fluent flyoutsubitem disappears

Question

With buttons flyoutsubitem works correct, but with other widgets it disappears.

I took code from flyouts first example and paste in third.(https://github.com/bdlukaa/fluent_ui/tree/master/example) When you hover over MenuFlyoutSubItem, side MenuFlyoutItems appear, but as soon as you move the cursor, they immediately disappear and there is no way to click on them.

video: https://youtu.be/mJT7Fo1p_JQ

child: GestureDetector(
            onTapUp: (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(),
              );

              void showFlyout(Offset position) {
                contextController.showFlyout(
                  barrierColor: Colors.black.withOpacity(0.4),
                  position: position,
                  barrierRecognizer: TapGestureRecognizer()
                    ..onTap = () {
                      Navigator.of(context).pop();
                    }
                    ..onSecondaryTapUp = (d) {
                      Navigator.of(context).pop();

                      final box = Navigator.of(context)
                          .context
                          .findRenderObject() as RenderBox;
                      final position = box.localToGlobal(
                        d.localPosition,
                        ancestor: box,
                      );

                      showFlyout(position);
                    },
                  builder: (context) {
                    return MenuFlyout(items: [
                      MenuFlyoutItem(
                        leading: const Icon(FluentIcons.share),
                        text: const Text('Share'),
                        onPressed: Flyout.of(context).close,
                      ),
                      MenuFlyoutSubItem(
                        text: const Text('Send to'),
                        items: (_) => [
                          MenuFlyoutItem(
                            text: const Text('Bluetooth'),
                            onPressed: Flyout.of(context).close,
                          ),
                          MenuFlyoutItem(
                            text: const Text('Desktop (shortcut)'),
                            onPressed: Flyout.of(context).close,
                          ),
                          MenuFlyoutSubItem(
                            text: const Text('Compressed file'),
                            items: (context) => [
                              MenuFlyoutItem(
                                text: const Text('Compress and email'),
                                onPressed: Flyout.of(context).close,
                              ),
                              MenuFlyoutItem(
                                text: const Text('Compress to .7z'),
                                onPressed: Flyout.of(context).close,
                              ),
                              MenuFlyoutItem(
                                text: const Text('Compress to .zip'),
                                onPressed: Flyout.of(context).close,
                              ),
                            ],
                          ),
                        ],
                      ),
                    ]);
                  },
                );
              }

              showFlyout(position);
            },
            child: FlyoutTarget(
              key: contextAttachKey,
              controller: contextController,
              child: ShaderMask(
                shaderCallback: (rect) {
                  final color = context.read<AppTheme>().color.defaultBrushFor(
                        FluentTheme.of(context).brightness,
                      );
                  return LinearGradient(
                    colors: [
                      color,
                      color,
                    ],
                  ).createShader(rect);
                },
                child: const FlutterLogo(
                  size: 400.0,
                ),
              ),
            ),
          )

Answer 1

I figured out the problem. It was that in the contextController.showFlyout function I did not have the navigatorKey field defined, which should have rootNavigatorKey.currentState.

                contextController.showFlyout(
                  barrierColor: Colors.black.withOpacity(0.4),
                  position: position,
                  navigatorKey: rootNavigatorKey.currentState