Flutter: Add Webview Progress bar

If you need to show the progress bar before loading the URL in the web view at Flutter means, this tutorial will be useful for you.

Add Package in Main Dart File

At the main dart, file enter the basic package

import ‘package:flutter/material.dart’;

Add Package in pubspec.yaml file

1. Go to “pubspec.yaml” file.

2. Under “cupertino_icons: ^0.1.2”, enter the code

#url_launcher: ^3.0.0
 flutter_webview_plugin: ^0.3.0+2

Install Plugin

1. To Install the Flutter webview plugin,

2. Tap “Package get” to install.

Import package in main.dart file

// import 'package:url_launcher/url_launcher.dart';
// import 'dart:async';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

Enter URL

Enter the URL command which you want to progress,

String url = "https://webapptiv.com/";
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'WebApptiv',
     theme: ThemeData.dark(),
       routes: {
       ' ': (_) => Home(),
         '/webview': (_) => WebviewScaffold(
           url: url,
           appBar: new AppBar(
             title: new Text("Webview"),
           ),
           withJavascript: true,
           withLocalStorage: true,
           withZoom: true,
         )
       },

Enter Flutter Webview Plugin at Class File

class Home extends StatefulWidget {
 @override
 HomeState createState() => HomeState();
}
class HomeState extends State<Home> {
 final webView = FlutterWebviewPlugin();
 TextEditingController controller = TextEditingController(text: url);
 @override
 void initState() {
   super.initState();
   webView.close();
   controller.addListener(() {
     url = controller.text;
   });
 }

Sync the URL to the File

To launch the URL in the page write the following code,

  // Future launchURL(String url) async {
    // if (await canLaunch(url)) {
      // await launch(url, forceSafariVC: true, forceWebView: true);
    // } else {
      // print("Can't Launch ${url}");
       // }
  // }

Create AppBar

@override
  Widget build(BuildContext context) {
  return Scaffold(
    appBar: new AppBar(
     title: new Text("Webview"),
          ),
body: Center(
      child: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(10.0),
            child: TextField(
              controller: controller,
            ),

Create onPressed button to open Link

 RaisedButton(
 child: Text("Open Link"),           
 onPressed: () {              
 Navigator.of(context).pushNamed("/webview");