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

Question

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 1

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

Solution 2

this function pushes route with transparent background

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

so in your CircularProgressIndicator page you can change background color of the root Widget like color: Colors.transperent or a plain Container without any color set will achieve the effect you need

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

see the working code on dartpad here

Solution 3

You can use showDialog to open a dialog which will open a transparent background with the AlertDialog, You can return your own stateful widget. Instead of streamBuilder just use future Builder.

try following code:

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

Comments

[Meggy]

I wrapped the circularprogressindicator with the stack but Android Studio underlined "_isLoading" in red. How do I check if it's loading?

[Meggy]

I got an underline red error on "context" in "context: context".

[Mert Toptas]

You write like to this; return Opacity( opacity: 1.0, child: CircularProgressIndicator(), ),

[Meggy]

Any chance you could edit your answer to show where I should write; return Opacity( opacity: 1.0, child: CircularProgressIndicator(), ), ?

[Meggy]

What should I put for "pageBuilder: (_, __, ___" ?

[Yadu]

Use as is, they're parameters of the function, if you ctrl click on it you'll see what they are

[Meggy]

Control click tells me "No usages found in all places".

[Yadu]

Let's see how you're using it, you have to import

[Meggy]

I tried adding your suggestion of "PageRouteBuilder( opaque: false," by using the example at Flutter.dev but the background remains a solid white during the transition. This is probably coming from the progress bars from within the future. Here's the code I used from the flutter.dev example; flutter.dev/docs/cookbook/animation/page-route-animation

[Meggy]

I've just re-edited the op with the code which calls the future.

[Yadu]

Let us continue this discussion in chat.

[Meggy]

That gave me a transparent CircularProgressIndicator(), instead of a transparent background.