Flutter: Add Webview Progress bar

Add Webview Progress bar in Flutter

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

Add Package in pubspec.yaml fileInstall 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 {
 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 {
 HomeState createState() => HomeState();
class HomeState extends State<Home> {
 final webView = FlutterWebviewPlugin();
 TextEditingController controller = TextEditingController(text: url);
 void initState() {
   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

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

Create onPressed button to open Link

 child: Text("Open Link"),           
 onPressed: () {              

Create on Pressed button to open Link