Flutter - Web view widget and progress bar.

WebView in a mobile application allows us to integrate a web page as a part of the app. It comes with all the features for managing history, cookies, HTML5 support and lot more. 

Using webview, you can build very cool apps like integrating HTML5 games, show text, audio, video, animation and more in the mobile app. The web page can be loaded from the same application by using a url address. It is the responsibility of a web browser to interpret text and commands that contained in the web page.

In this post, we are going to learn the basic usage of WebView in Flutter application. You will also learn how to use the WebView with progress bar loader widget that will hide when page fully loaded in the application. We going to create a small example for the same. The final output of the example will look like below:

Creating a new Project

1. Create a new project from File ⇒ New Flutter Project with your development IDE.
2. Now,  add the WebView plugin webview_flutter 0.3.10+3 as a dependency in the pubspec.yaml file. Once you do that, you need to run flutter packages get.
3. After that open main.dart file and edit it. As we have set our theme and change debug banner property of Application.

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Webview Widget',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: const Color(0xFF02BB9F),
        primaryColorDark: const Color(0xFF167F67),
        accentColor: const Color(0xFF02BB9F),
      ),
      home: MyHomePage(title: 'Webview Widget'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isLoading = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title,style: TextStyle(color:Colors.white),),

        ),
        body: ProgressHUD(
          child: Padding(
            padding: EdgeInsets.all(10.0),
            child: Stack(
              children: <Widget>[
                WebView(
                  initialUrl:"https://www.developerlibs.com/",
                  javascriptMode: JavascriptMode.unrestricted,

                  onPageFinished: pageFinishedLoading,
                ),
              ],
            ),
          ),
          inAsyncCall: _isLoading,
          opacity: 0.0,
        ));
  }
  void pageFinishedLoading(String url) {
    setState(() {
      _isLoading = false;
    });
  }
} 

in the build method of the widget, we have added WebView inside of ProgressHUD that is root widget of the screen. The pageFinishedLoading method will change progress bar state when page fully loaded.



4. Here, we have progress_hud.dart widget that we used in this example. You can use it in another project of flutter application. To change the state of this widget, you have to update inAsyncCall field. The progress bar will display if you make it true.

progress_hud.dart


library modal_progress_hud;
import 'package:flutter/material.dart';

class ProgressHUD extends StatelessWidget {

  final Widget child;
  final bool inAsyncCall;
  final double opacity;
  final Color color;
  final Animation<Color> valueColor;

  ProgressHUD({
    Key key,
    @required this.child,
    @required this.inAsyncCall,
    this.opacity = 0.3,
    this.color = Colors.grey,
    this.valueColor,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<Widget> widgetList = new List<Widget>();
    widgetList.add(child);
    if (inAsyncCall) {
      final modal = new Stack(
        children: [
          new Opacity(
            opacity: opacity,
            child: ModalBarrier(dismissible: false, color: color),
          ),
          new Center(
            child: new CircularProgressIndicator(
              valueColor: valueColor,
            ),
          ),
        ],
      );
      widgetList.add(modal);
    }
    return Stack(
      children: widgetList,
    );
  }
}

If you have followed the article carefully, you can see the app running very smoothly as shown in the above. But if you are facing any problem or you have any quires, please feel free to ask it from the comment section.