在 AlertDialog 上调用 API 后显示 SnackBar 时出现问题 “是”按钮 在 Flutter 中单击

Trouble Showing SnackBar After API Call on AlertDialog 'Yes' Button Click in Flutter

提问人:Md Zihad 提问时间:10/18/2023 更新时间:10/18/2023 访问量:39

问:

我在 Flutter 应用程序中遇到了一个问题,我想在 AlertDialog 中单击“是”按钮后进行 API 调用后显示 SnackBar。工作流程如下:

  1. 用户点击一个按钮,触发 AlertDialog。
  2. 在AlertDialog中,用户可以选择单击“是”。点击“是”后,我需要 立即关闭 AlertDialog 并开始进行 API 调用。
  3. 在 API 调用期间,我想在屏幕上显示一个加载指示器。
  4. API 调用完成后,我想根据结果显示一个 SnackBar

我遇到的问题是,在我之后 弹出 AlertDialog 以显示 SnackBar,上下文为 null, 这阻止了我显示 SnackBar。

class MyProvider extends ChangeNotifier {
  bool _loader = false;

  bool get loader => _loader;

  Future<bool> fakeApiCall() async {
    _loader = true;
    notifyListeners();

    await Future.delayed(Duration(seconds: 3));
    _loader = false;
    notifyListeners();

    return true;
  }
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final myProvider = context.watch<MyProvider>();
    return Scaffold(
      appBar: AppBar(),
      body: myProvider.loader
          ? const Center(
              child: CircularProgressIndicator(),
            )
          : Center(
              child: ElevatedButton(
                onPressed: () async {
                  await showDialog(
                    context: context,
                    builder: (context) {
                      return AlertDialog(
                        content: const Text("Alert"),
                        actions: [
                          TextButton(
                            onPressed: () async {
                              Navigator.pop(context);
                              context
                                  .read<MyProvider>()
                                  .fakeApiCall()
                                  .then((value) {
                                if (value) {
                                  ScaffoldMessenger.of(context).showSnackBar(
                                      const SnackBar(
                                          content: Text("Snackbar Showed")));
                                }
                              });
                            },
                            child: const Text("Yes"),
                          )
                        ],
                      );
                    },
                  );
                },
                child: const Text("Tap"),
              ),
            ),
    );
  }
}

我尝试了不同的方法,包括传递 BuildContext 和使用 GlobalKey,但我无法解决这个问题。

我将不胜感激有关如何正确管理上下文的任何见解或建议,以便我可以在 API 调用后显示 SnackBar。

颤振 提供程序

评论


答:

0赞 Muddassar 10/18/2023 #1

您可以制作一个处理按钮的小部件,并在单击时显示警报,当您在警报上单击“是”时弹出上下文,然后使用作为参数传递给小部件的回调函数。

TextButton(
 onPressed: () async {
    Navigator.pop(context);
    callApiFunction();
},

现在,在调用新的自定义小部件的父小部件类中,您可以在那里实现调用 api 并显示 snackBar 的回调。