WebViewScaffold in Flutter

WebViewScaffold is the flutter WebView plugin. If you want to open any web page without using your device’s browser then you can do it easily using WebViewScaffold widget.

Properties Of WebViewScaffold :

• url: The url which we want to search.
• appBar: The add appBar in our flutter application.
• withZoom: If you allow your web page to zoom-in or zoom-out then put it true otherwise false.
• initialChild: It is used to add your own widget while webpage loads.
• hidden: If true then show us CircularProgressIndicator while webpage loads.

Example:

main.dart

Dart

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

void main()=> runApp(MaterialApp(
  home:MyHomePage(),
  debugShowCheckedModeBanner: false,
  theme:ThemeData(
    primarySwatch: Colors.blue
  )
));

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {

  TextEditingController controller=TextEditingController();
  FlutterWebviewPlugin flutterWebviewPlugin= FlutterWebviewPlugin();
  var url= "https://google.com";

  @override
  void initState() {
    super.initState();
    flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged wvs) {});
  }
    searchURL(){
    setState(() {
      url = "https://www."+controller.text;
      flutterWebviewPlugin.reloadUrl(url);
      controller.text=url;
    });
  }
  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      url: url,
      withZoom: true,
      hidden: true,
      // initialChild: Container(
      //   child:Center(child: Text("Loading"),)
      // ),
      appBar: AppBar(
        backgroundColor: Colors.green,
        leading: Icon(Icons.search),
        title: TextField(
          controller: controller,
          textInputAction: TextInputAction.search,
          onSubmitted:(url)=>searchURL(),
          style: TextStyle(
            color: Colors.white
          ),
          decoration: InputDecoration(
            hintText: "Search Here",
            hintStyle: TextStyle(color: Colors.white)
          ),
        ),
       actions: [
          IconButton(icon: Icon(Icons.arrow_back),
          onPressed: (){
            flutterWebviewPlugin.goBack();
            controller.text="";
          }
          ),
          IconButton(icon: Icon(Icons.arrow_forward),
          onPressed: searchURL,),
        ],
      ),
    );
  }
}

Output:

Explanation:

1. Add flutter_webview_plugin in dependencies in pubspec.yaml file.
2. Now come back to main.dart file.
3. initially url is “https://google.com” and when app starts, this url will be loaded.
4. When user type the url and press enter then searchURL() will be called and requested url will be loaded.
5. If user wants to go back,  press arrow_back key.
6. If you want to add your own initial child then uncomment the initialChild and add your widget.
7. set withZoom = true if you allow your webpage to zoom-in or zoom-out.