Flutter Show CircularProgressIndicator While Loading WebView Example

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.

2. Find dependencies line and put webview_flutter: ^0.3.19+7 just after it like i did in below code.

Complete Source Code for pubspec.yam file :

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.

5. Import webview_flutter.dart package to use WebView in your current flutter project.

6. Create void main runApp() method and we would call our main MyApp class here.

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.

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.

9. Create our main Child class named as WebViewState extends with State.

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.

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.

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.

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.

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.

15. Complete source code for main.dart file:

Screenshots:

Flutter Show CircularProgressIndicator While Loading WebView Example

Leave a Reply

Your email address will not be published.