Skip to content
Related Articles

Related Articles

WebViewScaffold in Flutter
  • Difficulty Level : Expert
  • Last Updated : 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.

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.








import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
void main()=> runApp(MaterialApp(
  debugShowCheckedModeBanner: false,
class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();
class _MyHomePageState extends State {
  TextEditingController controller=TextEditingController();
  FlutterWebviewPlugin flutterWebviewPlugin= FlutterWebviewPlugin();
  var url= "";
  void initState() {
    flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged wvs) {});
    setState(() {
      url = "https://www."+controller.text;
  Widget build(BuildContext context) {
    return WebviewScaffold(
      url: url,
      withZoom: true,
      hidden: true,
      // initialChild: Container(
      //   child:Center(child: Text("Loading"),)
      // ),
      appBar: AppBar(
        leading: Icon(,
        title: TextField(
          controller: controller,
          style: TextStyle(
            color: Colors.white
          decoration: InputDecoration(
            hintText: "Search Here",
            hintStyle: TextStyle(color: Colors.white)
       actions: [
          IconButton(icon: Icon(Icons.arrow_back),
          onPressed: (){
          IconButton(icon: Icon(Icons.arrow_forward),
          onPressed: searchURL,), 



view web pages in application


  1. Add flutter_webview_plugin in dependencies in pubspec.yaml file.
  2. Now come back to main.dart file.
  3. initially url is “” 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
Recommended Articles
Page :