WebViewScaffold in Flutter

30 Aug, 2020
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.
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:
Add flutter_webview_plugin in dependencies in pubspec.yaml file.Now come back to main.dart file.initially url is “https://google.com” and when app starts, this url will be loaded.When user type the url and press enter then searchURL() will be called and requested url will be loaded.If user wants to go back,  press arrow_back key.If you want to add your own initial child then uncomment the initialChild and add your widget.set withZoom = true if you allow your webpage to zoom-in or zoom-out.
Add flutter_webview_plugin in dependencies in pubspec.yaml file.
Now come back to main.dart file.
initially url is “https://google.com” and when app starts, this url will be loaded.
When user type the url and press enter then searchURL() will be called and requested url will be loaded.
If user wants to go back,  press arrow_back key.
If you want to add your own initial child then uncomment the initialChild and add your widget.
set withZoom = true if you allow your webpage to zoom-in or zoom-out.
Articles
Dart
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.