提问人:Md Zihad 提问时间:10/18/2023 更新时间:10/18/2023 访问量:39
在 AlertDialog 上调用 API 后显示 SnackBar 时出现问题 “是”按钮 在 Flutter 中单击
Trouble Showing SnackBar After API Call on AlertDialog 'Yes' Button Click in Flutter
问:
我在 Flutter 应用程序中遇到了一个问题,我想在 AlertDialog 中单击“是”按钮后进行 API 调用后显示 SnackBar。工作流程如下:
- 用户点击一个按钮,触发 AlertDialog。
- 在AlertDialog中,用户可以选择单击“是”。点击“是”后,我需要 立即关闭 AlertDialog 并开始进行 API 调用。
- 在 API 调用期间,我想在屏幕上显示一个加载指示器。
- 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 的回调。
评论