Flutter/Dart - 加载 future 的 CircularProgressIndicator 的透明背景？

Question

目前，当我滑动到新路线时，我会看到带有旋转CircularProgressIndicator的白色背景。新路由有一个从 HTTP Post 获取数据的 Future。相反，我希望原始页面的背景保留在旋转器后面，直到 future 完成并且发生转换。那么如何使旋转器的背景透明而不是白色呢？这是 future 的代码，我认为这是触发旋转器的地方；

FutureBuilder<List<ReplyContent>> replyStage({String replyid, String replytitle}) {
  return new FutureBuilder<List<ReplyContent>>(
    future: downloadReplyJSON(),
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        List<ReplyContent> replycrafts = snapshot.data;
        return StageBuilderVR(replycrafts, replytitle);
      } else if (snapshot.hasError) {
        return Text('${snapshot.error}');
      }
      return CircularProgressIndicator();
    },
  );
}

这是滑动到 future 的代码；

onSwipeUp: () {
Navigator.of(context).push(_createRoute());
}

以及PageRouteBuilder的代码:

Route _createRoute() {
  return PageRouteBuilder(
    opaque: false,
    pageBuilder: (context, animation, secondaryAnimation) => ReplyHome(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = Offset(0.0, 1.0);
      var end = Offset.zero;
      var curve = Curves.ease;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );
}

Answer 1

您可以使用showDialog打开一个对话框，该对话框将使用AlertDialog打开透明背景，您可以返回自己的有状态小部件。使用 future Builder 代替 StreamBuilder。

尝试以下代码:

void uploadAndShowProgress() async {
    await showDialog(
      context: context,
      builder: (context) {
        return StreamBuilder(
          stream: uploadFile(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              StorageTaskEvent event = snapshot.data;
              final _snapshot = event.snapshot;
              _progress = _snapshot.bytesTransferred / _snapshot.totalByteCount;
            } else {
              //*  pop when there's no data or error...
              Navigator.pop(context);
            }

            if (snapshot.hasError) {
              SnackbarWidget.showSnackbar(
                  content: Text(snapshot.error.toString()), context: context);
            }

            return AlertDialogWidget(progress: _progress);
          },
        );
      },
    );
  }