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