How to show Loading Indicator in WebView Flutter?

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.

You could you **Future Builder to solve this problem easily**. Yes, you hear correct.

```
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {

static Future<String> get _url async {
await Future.delayed(Duration(seconds: 1));
return 'https://flutter.dev/';
}

@override
Widget build(BuildContext context) => Scaffold(
body: Center(
child:FutureBuilder(
future: _url,
builder: (BuildContext context, AsyncSnapshot snapshot) => snapshot.hasData
? WebViewWidget(url: snapshot.data,)
: CircularProgressIndicator()),
),);
}

class WebViewWidget extends StatefulWidget {
final String url;
WebViewWidget({this.url});

@override
_WebViewWidget createState() => _WebViewWidget();
}

class _WebViewWidget extends State<WebViewWidget> {
WebView _webView;
@override
void initState() {
super.initState();
_webView = WebView(
initialUrl: widget.url,
javascriptMode: JavascriptMode.unrestricted,
);
}

@override
void dispose() {
super.dispose();
_webView = null;
}

@override
Widget build(BuildContext context) => _webView;
}
```

<h3>Full Example</h3>

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 call`onPageFinished` of webview I set `isLoading=false` variable value and set transparent container.

we can use The IndexedStack widget helps to switch widgets according to the index. We also make use of onPageStarted and onPageFinished attributes of webview. Using state management we change the value of the index when the page started to load and also when the page loading is finished.

num pos = 1;

In Build Method

return Scaffold(
body: IndexedStack(index: pos, children: <Widget>[
WebView(
initialUrl: 'http://pub.dev/',
javascriptMode: JavascriptMode.unrestricted,
onPageStarted: (value) {
setState(() {
pos = 1;
});
},
onPageFinished: (value) {
setState(() {
pos = 0;
});
},
),
Container(
child: Center(child: CircularProgressIndicator()),
),
]));

You can use BLOC, Stream & stateless Widget


----------


import 'dart:async';

import 'package:rxdart/subjects.dart';

class LoadingWebPageBloc {
//Controllers
final BehaviorSubject<bool> _loadingWebPageController = BehaviorSubject<bool>.seeded(true);

//Sinks
Function(bool) get changeLoadingWebPage => _loadingWebPageController.sink.add;

//Streams
Stream<bool> get loadingWebPageStream => _loadingWebPageController.stream.asBroadcastStream();

@override
void dispose() {
_loadingWebPageController.close();
super.dispose();
}
}


----------


import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class CustomWebPagePreview extends StatelessWidget {
final String url;
CustomWebPagePreview({@required this.url});

final LoadingWebPageBloc loadingWebPageBloc = LoadingWebPageBloc();

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: appBar,
body: Container(
child: Stack(
children: <Widget>[
WebView(
initialUrl: url,
javascriptMode: JavascriptMode.unrestricted,
onPageStarted: (value) {
loadingWebPageBloc.changeloading(true);
},
onPageFinished: (value) {
loadingWebPageBloc.changeloading(false);
},
),
StreamBuilder<bool>(
stream: loadingWebPageBloc.loading,
initialData: true,
builder: (context, snap) {
if (snap.hasData && snap.data == true) {
return Center(
child: CircularProgressIndicator(),
);
}
return SizedBox();
},
),
],
),
),
),
);
}
}

Just use Stack and Visibility Widget

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class MyWebView extends StatefulWidget {
final String url;
const MyWebView({Key? key, this.url = ''}) : super(key: key);

@override
State<MyWebView> createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
bool isLoading = true;
@override
void initState() {
super.initState();
if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
if (Platform.isIOS) WebView.platform = CupertinoWebView();
}

@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
),
body: Stack(
children: [
WebView(
initialUrl: widget.url,
onPageFinished: (finish) {
setState(() {
isLoading = false;
});
},
javascriptMode: JavascriptMode.unrestricted,
),
Visibility(
visible: isLoading,
child: const Center(
child: CircularProgressIndicator(),
),
)
],
),
bottomNavigationBar: BottomAppBar(
child: Row(),
),
),
);
}
}

**Full Example**

using Stack and Visibility Widget

bool showLoader = true;
Stack(
children: [
Container(
height: _updatedHeight,
child: GestureDetector(
onHorizontalDragUpdate: (updateDetails) {},
child: Container(
margin: EdgeInsets.only(right: 16,left: 16),
width: MediaQuery.of(context).size.width,
child: WebView(
initialUrl: "url",
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_completerController.complete(webViewController);
mainWebController = webViewController;
},
onProgress: (int progress) {
if(progress == 100){
setState(() {
showLoader = false;
});
}
},
onPageStarted: (String url) {
// print("WebView :: onPageStarted :: $url");
},
onPageFinished: (url) async {
double documentElementHeight = double.parse(
await mainWebController.runJavascriptReturningResult("document.documentElement.scrollHeight;"));
// print("WebView :: onPageFinished :: documentElementHeight = $documentElementHeight");
setState(() {
_updatedHeight = documentElementHeight;
});
});
},
navigationDelegate: getNavigationDelegate,
),
),
),
),
Visibility(
visible: showLoader,
child:Padding(
padding: const EdgeInsets.only(top: 50),
child: Container(
width: MediaQuery.of(context).size.width,
child: Center(
child: AWProgressIndicatorWidget(),
),
),
)
)
],
)

Google Codelabs Example
=======================


In my opinion, this solution is the **most simple and has a great UX**.

For more information, check out the official example of [Listening for page load events][1].

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewStack extends StatefulWidget {
const WebViewStack({super.key});

@override
State<WebViewStack> createState() => _WebViewStackState();
}

class _WebViewStackState extends State<WebViewStack> {
var loadingPercentage = 0;

@override
Widget build(BuildContext context) {
return Stack(
children: [
WebView(
initialUrl: 'https://flutter.dev',
onPageStarted: (url) {
setState(() {
loadingPercentage = 0;
});
},
onProgress: (progress) {
setState(() {
loadingPercentage = progress;
});
},
onPageFinished: (url) {
setState(() {
loadingPercentage = 100;
});
},
),
if (loadingPercentage < 100)
LinearProgressIndicator(
value: loadingPercentage / 100.0,
),
],
);
}
}


[1]:

[To see links please register here]

For developers who wish to have clean code, Try this :

on **main.dart**

import 'package:flutter/material.dart';
import 'package:ProjectName/src/app.dart'; //replace with your project name

void main() => runApp(MyApp());

on **app.dart**

import 'package:flutter/material.dart';
import 'package:ProjectName/src/webview_container.dart'; //replace with your project name

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: WebViewClass('https://www.testurl.com', 'test') //replace with your url
)
);
}
}

on **webview_container.dart**

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewClass extends StatefulWidget {
final url;
final title;
WebViewClass(this.url, this.title);


@override
createState() => WebViewState(this.url, this.title);
}
class WebViewState extends State<WebViewClass>{

var _url;
var _title;

int position = 1 ;

final key = UniqueKey();
WebViewState(this._url, this._title);

doneLoading(String A) {
setState(() {
position = 0;
});
}

startLoading(String A){
setState(() {
position = 1;
});
}

@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: IndexedStack(
index: position,
children: <Widget>[

WebView(
zoomEnabled: false, //I have disabled zoom functionality on the app
initialUrl: _url,
javascriptMode: JavascriptMode.unrestricted,
key: key ,
onPageFinished: doneLoading,
onPageStarted: startLoading,
),

Container(
color: Colors.white,
child: Center(
child: CircularProgressIndicator()),
),

])
),
);
}
}

onPageStarted is better! Because the loading indicator stopped after the URL start to load.

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBarCommon(
title: Text(
widget.title,
),
),
body: Stack(
children: <Widget>[
WebView(
initialUrl: widget.url,
javascriptMode: JavascriptMode.unrestricted,
onPageStarted: (started){
setState(() {
isLoading = false;
});
},
),
isLoading
? const Center(
child: LoadingIndicator(),
)
: Stack(),
],
),
);
}