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



filter_none

edit
close

play_arrow

link
brightness_4
code

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,), 
        ],
      ),
    );
  }
}

chevron_right


Output:

view web pages in application

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.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

4


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.