WebView widget gives us two call back methods onPageFinished() and onPageStarted(). The onPageFinished() method invokes every time when web page done loading its inner contents. The onPageStarted() function invokes every time when WebView start loading web page and until all the web contents will downloaded. We would use these both functions in our tutorial to make the Progress bar visible and invisible from screen using State. So in this tutorial we would Flutter Show CircularProgressIndicator While Loading WebView Android iOS Example Tutorial.
Contents in this project Flutter Show CircularProgressIndicator While Loading WebView Android iOS Example Tutorial:
1. The first step is to install the WebView widget library in our flutter project. The WebView library dose not come with pre-build flutter project. So open your project’s pubspec.yaml file.
|
1 2 3 4 |
dependencies: webview_flutter: ^0.3.19+7 flutter: sdk: flutter |
Complete Source Code for pubspec.yam file :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
name: myapp description: A new Flutter project. version: 1.0.0+1 environment: sdk: ">=2.1.0 <3.0.0" dependencies: webview_flutter: ^0.3.19+7 flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.2 dev_dependencies: flutter_test: sdk: flutter # For information on the generic Dart part of this file, see the # following page: https://dart.dev/tools/pub/pubspec # The following section is specific to Flutter. flutter: # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true |
3. Now we have to open our Flutter project root directory in Command Prompt in windows and Terminal in MAC. Execute flutter pub get command to download and install the WebView library.
4. Now all the configuration part has done. Open your project’s main.dart file and import material.dart package in your project.
|
1 |
import 'package:flutter/material.dart'; |
5. Import webview_flutter.dart package to use WebView in your current flutter project.
|
1 |
import 'package:webview_flutter/webview_flutter.dart'; |
6. Create void main runApp() method and we would call our main MyApp class here.
|
1 |
void main() => runApp(MyApp()); |
7. Create our main Root parent class named as MyApp extends with State less widget. Here we would call our WebViewClass class in body section.
|
1 2 3 4 5 6 7 8 9 10 11 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: WebViewClass() ) ); } } |
8. Create a class named as WebViewClass extends with StatefulWidget. In this class we would make the createState() method of State and pass the Child class WebViewState name with it.
|
1 2 3 4 5 |
class WebViewClass extends StatefulWidget { WebViewState createState() => WebViewState(); } |
9. Create our main Child class named as WebViewState extends with State.
|
1 2 3 4 |
class WebViewState extends State<WebViewClass>{ } |
10. Create num type variable named as position with default value 1. We are using IndexedStack widget in our tutorial to manage both WebView and Circular Progress Indicator widgets together.
|
1 |
num position = 1 ; |
11. Create a key variable with Unique Key method. We would use this key to manage webview screens. Key will make sure that each time when use loads the WebView it generate a new screen.
|
1 |
final key = UniqueKey(); |
12. Create a function named as doneLoading(). We would call this function when WebView done loading its inner contents. In this function we would change the position value to Zero. So the WebView will visible on screen.
|
1 2 3 4 5 |
doneLoading(String A) { setState(() { position = 0; }); } |
13. Create a function named as startLoading(). In this function we would change the position value to One, So it’ll display the Progress bar on screen.
|
1 2 3 4 5 |
startLoading(String A){ setState(() { position = 1; }); } |
14. Create Widget Build area and we would create a IndexedStack widget in body section . We would put WebView and CircularProgressIndicator() widget inside IndexedStack widget. The IndexedStack widget works on index number. It will display only given index number widget from its children.
- onPageFinished : Calls every time when web page done loading its content.
- onPageStarted : Calls every time when web page start loading its inner content.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Show ProgressBar While Loading Webview')), body: IndexedStack( index: position, children: <Widget>[ WebView( initialUrl: 'https://Google.com', javascriptMode: JavascriptMode.unrestricted, key: key , onPageFinished: doneLoading, onPageStarted: startLoading, ), Container( color: Colors.white, child: Center( child: CircularProgressIndicator()), ), ]) ); } |
15. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: WebViewClass() ) ); } } class WebViewClass extends StatefulWidget { WebViewState createState() => WebViewState(); } class WebViewState extends State<WebViewClass>{ num position = 1 ; final key = UniqueKey(); doneLoading(String A) { setState(() { position = 0; }); } startLoading(String A){ setState(() { position = 1; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Show ProgressBar While Loading Webview')), body: IndexedStack( index: position, children: <Widget>[ WebView( initialUrl: 'https://Google.com', javascriptMode: JavascriptMode.unrestricted, key: key , onPageFinished: doneLoading, onPageStarted: startLoading, ), Container( color: Colors.white, child: Center( child: CircularProgressIndicator()), ), ]) ); } } |
Screenshots:
