I want to show Loading first before the web view data displayed on the screen. How can do that?
This is my code:
class WebDetailPage extends StatelessWidget {
final String title;
final String webUrl;
final Completer<WebViewController> _controller =
Completer<WebViewController>();
WebDetailPage({
@required this.title,
@required this.webUrl,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colour.white,
title: Text(title, style: TextStyle(color: Colour.midnightBlue)),
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colour.midnightBlue),
onPressed: () => Navigator.of(context).pop()),
),
body: Center(
child: WebView(
initialUrl: webUrl,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
),
)
);
}
}
Can someone help me with this problem? Because I already search and research about it still can find the solution.
class WebViewState extends State<WebViewScreen>{
String title,url;
bool isLoading=true;
final _key = UniqueKey();
WebViewState(String title,String url){
this.title=title;
this.url=url;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: Text(this.title,style: TextStyle(fontWeight: FontWeight.w700)),centerTitle: true
),
body: Stack(
children: <Widget>[
WebView(
key: _key,
initialUrl: this.url,
javascriptMode: JavascriptMode.unrestricted,
onPageFinished: (finish) {
setState(() {
isLoading = false;
});
},
),
isLoading ? Center( child: CircularProgressIndicator(),)
: Stack(),
],
),
);
}
}
I just use Stack
widget so on top of webview set loading indicator. When callonPageFinished
of webview I set isLoading=false
variable value and set transparent container.