在flutter中显示全屏加载小部件

Question

我想在API调用时在flutter中显示全屏加载视图。但是当我在脚手架体中添加加载小部件时，它出现在appbar和底部导航器之后。

我花了很多时间在全屏显示加载视图。另外，我希望在API调用时防止后退操作。

Answer 1

既然您使用的是scaffold，那么就使用它的showdialog()方法。

它有一个名为BarrierDismissible的属性，如果将其设置为false，则用户将无法关闭屏幕或与屏幕外的屏幕交互。

void _openLoadingDialog(BuildContext context) {
  showDialog(
    barrierDismissible: false,
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        content: CircularProgressIndicator(),
      );
    },
  );
}

完成API加载后，调用navigator.pop（context）；取消对话框。

@override
Widget build(BuildContext context) {
  return WillPopScope(
      child: Scaffold(
        body: Container(),
      ),
      onWillPop: _onBackButton
  );
}

Future<bool> _onBackButton() {
  // Implement your logic
  return Future.value(false);
}