'Flutter InAppWebView show progress indicator only after specific load time
I build a hybrid app with the Flutter InAppWebView, which shows only one website without hints that the user is basically interacting with a browser.
With a fast internet connection it works perfect. But when the sites need some time to load nothing is happening until the site is loaded and gets rendered. During this load time it does seem like the app has hung.
When I activate the LinearProgressIndicator you realize that the app is loading. But then with a good internet connection the sites are loading so fast that the ProgressIndicator is an annoying and unnecessary detail.
So I would like to show the ProgressIndicator only if the load process took more than 800 ms of time. I tried to implement this with a Flutter timer which sets a variable to true to let the code in onProgressChanged be executed.
// to indicatr in onProgressChanged that the specific time is over
// and the progress bar should be displayed
bool loadTimerover = false;
// timer object that is created in onLoadStart and cleared in onLoadStop
late Timer loadbartimer;
.
.
.
InAppWebView(
key: webViewKey,
initialUrlRequest:
URLRequest(url: Uri.parse("https://www.example.com/")),
initialOptions: options,
pullToRefreshController: pullToRefreshController,
onWebViewCreated: (controller) {
webViewController = controller;
},
onLoadStart: (controller, url) {
setState(() {
this.url = url.toString();
urlController.text = this.url;
});
this.loadbartimer = Timer(
Duration(milliseconds: 800), () {
setState(() {
this.loadTimerover = true;
});
}
);
},
onLoadStop: (controller, url) async {
pullToRefreshController.endRefreshing();
setState(() {
this.url = url.toString();
urlController.text = this.url;
});
// to reset the variable for the next siteload
// if loadtimer finished this is necessary
this.loadTimerover = false;
// stop the loadtimer if he isnt done
try {
this.loadbartimer.cancel();
}catch(e) {}
},
onProgressChanged: (controller, progress) {
// to show load progress only if it takes longer
// than 800ms
if (this.loadTimerover == true) {
if (progress == 100) {
pullToRefreshController.endRefreshing();
}
setState(() {
this.progress = progress / 100;
urlController.text = this.url;
});
}
},
),
progress < 1.0
? LinearProgressIndicator(value: progress,
valueColor: new AlwaysStoppedAnimation<Color>(Color(0xfffffffa)),
backgroundColor: Color(0xfffb5148),
)
: Container(),
With this way the ProgressIndicator is hidden when the sites are loading fast. But with a bad connection were it takes some seconds to load the sites, the ProgressIndicator is only poping up quickly short before the site is rendered. So during the load time it looks again like the app has hung. If the loading process took longer than 800 ms the ProgressIndicator should just work as smooth as he is doing normally.
I hope I have explained the problem sufficiently.
Thanks in advance
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
