Flutter / Dart-加载未来时对CircularProgressIndicator具有透明背景？

问题描述

此刻，当我滑动到新路线时，背景变成白色，CircularProgressIndicator旋转。新路由具有Future，可以从HTTP Post获取数据。相反，我希望原始页面的背景保持在微调框后面，直到将来完成并进行过渡为止。那么，如何使微调框的背景透明而不是白色呢？这是未来的代码，我认为是触发微调器的地方；

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();
    },);
}

这是滑动到将来的代码；

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

还有PageRouteBuilder的代码：

Route _createRoute() {
  return PageRouteBuilder(
    opaque: false,pageBuilder: (context,animation,secondaryAnimation) => ReplyHome(),transitionsBuilder: (context,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,);
    },);
}

解决方法

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

尝试以下代码：

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);
          },);
      },);
  }

,

Stack(
      children: <Widget>[
        Opacity(
          opacity: _isLoading ? 1.0 : 0,child: CircularProgressIndicator(),),],);

,

此功能可推送具有透明背景的路线

onPressed: () {
                    Navigator.of(context).push(
                      PageRouteBuilder(
                        opaque: false,pageBuilder: (_,__,___) {
                          return MyTransperentRoute();
                        },);
                  }

因此，在CircularProgressIndicator页面中，您可以更改根窗口小部件的背景颜色，例如color: Colors.transperent或纯色Container，而无需设置任何颜色即可实现所需的效果

class MyTrnsperentPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: const Center(
        child: CircularProgressIndicator(),);
  }
}

在dartpad here上查看工作代码

,

最后，我创建了一个虚拟页面，该页面以图形方式镜像了前一页，其中包含前一页的所有图形元素，而没有任何代码。我用它代替了CircularProgressIndicator。我不知道它是否理想，但似乎效果很好。

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