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

g0czyy6m  于 2023-10-22  发布在  Flutter
关注(0)|答案(1)|浏览(130)

我在Flutter应用程序中遇到一个问题,在AlertDialog中单击“Yes”按钮后,我想在进行API调用后显示SnackBar。工作流程如下:
1.用户点击按钮,触发AlertDialog。
1.在AlertDialog中,用户可以选择单击“Yes”。点击“是”后,我需要立即关闭AlertDialog并开始进行API调用。
1.在API调用期间,我希望在屏幕上显示一个加载指示器。

  1. 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。

wbrvyc0a

wbrvyc0a1#

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

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

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

相关问题