I'm trying to fetch a PageView.Builder
which is built with data from the web. When I try to swipe to it from another page, I get a white background that seems to act as a placeholder until the web data from the Future
arrives. What I'd like is for the original page to remain visible in the background until the page is built. But though I've tried everything I can think of, the background remains white until the Future
arrives to fill the PageView
. How can I get either a clear or at least a lowered opacity placeholder until it arrives?
I've used a CircularProgressIndicator as a placeholder but not only does it look bad (the swipe blows it up in all directions), but the background remains stubbornly opaque and white. I also tried a Container
with a transparent color, but that merely overlays the white background of the Future. How can I get rid of the opaque white background which acts like a placeholder to the Future
?
Here's the Future;
FutureBuilder<List<ReplyContent>> replyStage({String replyid}) {
return FutureBuilder<List<ReplyContent>>(
future: downloadReplyJSON(replyid),
builder: (context, snapshot) {
if (snapshot.hasData) {
List<ReplyContent> replycrafts = snapshot.data;
return StageBuilderVR(replycrafts, Globals.masterTitle);
} else if (snapshot.hasError) {
return Text('${snapshot.error}');
}
return
Container(
color: Colors.transparent,
);
}
);
}
So I decided to take a different approach altogether and 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 used this dummy in place of the CircularProgressIndicator. It may not be the correct or best way, but it seems to work well. I'm quite pleased with the result.
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();
},
);
}