如何在没有上下文的情况下在应用程序中的任何位置显示 Dialog？

Question

大家好，这是我一直在问自己的一个问题。我也看到了一些答案，但它没有解决我的问题，我发现的一些类似问题是：Flutter showDialog with navigator key 而不是传递上下文或使用不包含 Navigator 的上下文请求的 Navigator 操作

我想要实现的是在我的应用程序中的任何地方（所以在我的应用程序的任何页面中）显示来自同一段代码的弹出对话框（所以它都是集中的）。问题是，从那段代码中，我无法访问 BuildContext，这是因为我基于不是来自用户操作（如按钮点击）的事件显示此弹出窗口，而它们可能是 Firestore 侦听器，或发生在我的代码深处的错误（因此我可以向用户显示错误消息），因为我对代码如此深入，通常我无权访问 BuildContext。

在类似的问题中，我发现了一些看起来像解决方案的东西。这些解决方案使用 GlobalKey 作为导航器，因此可以从任何地方访问它，关于如何在应用程序的任何地方访问它有一些不同的选项，在我的情况下，我选择了一个单例（我的“存储库”）来存储这个 globalKey。然后当事件被触发时，我使用 globalKey 来获取上下文并显示一个对话框，但它抛出了这个错误：

Navigator operation requested with a context that does not include a Navigator.
The context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget.

@Hemanth Raj 提到您的根 Widget 需要是 MaterialApp，我确实有一个 MaterialApp 作为我的根。

这是我拥有的应用程序结构的近似值：

void main() async {

  // Here I create the navigatorKey
  GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  // I then init my Singleton with the navigatorKey
  await repository.init(navigatorKey: navigatorKey);

  // Then I pass the navigatorKey down to my App
  runApp(MyApp(debugMode: debugMode, navigatorKey: navigatorKey));
}

class MyApp extends StatefulWidget {
  final navigatorKey;

  const MyApp({Key key, this.navigatorKey})
      : super(key: key);

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> with WidgetsBindingObserver {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        navigatorKey: widget.navigatorKey,
        title: 'My app',
        home: SplashPage(),
        theme: _buildMyTheme(),
      );
  }
}

然后在我的存储库中，我有一个 Firestore 事件的监听器。在我进入主屏幕后，这些可以随时触发。这个想法是我在应用程序中找到自己的任何地方，如果事件被触发，弹出窗口应该出现。

class Repository {

  GlobalKey<NavigatorState> get navigatorKey => _navigatorKey;
  GlobalKey<NavigatorState> _navigatorKey;

  void init({GlobalKey<NavigatorState> navigatorKey}) {
    _navigatorKey = navigatorKey;
  }

  void _listenToEvents() {
    streamWithEvents.listen((event) {
      showDialog(
        context: navigatorKey.currentContext,
        builder: (_) => CustomMessageDialog(message: event.message),
      );
    });
  }
}

Answer 1

使用navigatorKey.currentState.overlay.contextforshowDialog的上下文。