Search code examples
flutterdartspinnerfutureopacity

Flutter/Dart - Transparent Background to CircularProgressIndicator on a Loading Future?


At the moment I get a white background with a spinning CircularProgressIndicator when I swipe to a new route. The new route has a Future that fetches data from a HTTP Post. Instead I'd like the background of the original page to remain behind the spinner until the future completes and the transition happens. So how do I make the spinners' background transparent instead of white? Here's the code to the future which I assume is where the spinner gets triggered;

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

And here's the code which swipes to the future;

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

And the code for the 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,
      );
    },
  );
}

Solution

  • In the end, I created a dummy Page that graphically mirrored the previous page with all the graphic elements of the previous page and none of the code. I put that in place of the CircularProgressIndicator. I don't know if it's ideal, but it seems to work well.

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