How to Add WebView In Flutter ?

· 3 min read
How to Add WebView In Flutter
How to Add WebView In Flutter

WebView is a view that display web pages inside your application. So in this article, We will learn about How to Add WebView In Flutter?

What is  WebView?

WebView is nothing but an Embeddable browser that a native application can use to display web content.

How to Add WebView In Flutter?

To Add WebView

In pubspec.yaml file add the dependency:

webview_flutter: ^0.1.1

For iOS App below keys paste in .plist file inside the iOS project folder.

<key>io.flutter.embedded_views_preview</key><string>yes</string>
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSAllowsArbitraryLoadsInWebContent</key>
    <true/>
</dict>

We also need to create a Class like the below:

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:async';

class WebViewClass extends StatefulWidget {
  @override
  _WebViewClassState createState() => _WebViewClassState();
}

class _WebViewClassState extends State<WebViewClass> {
  Completer<WebViewController> _controller = Completer<WebViewController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('WebView'),
      ),
      body: WebView(
        initialUrl: 'https://google.com',
        onWebViewCreated: (WebViewController webViewController) {
          _controller.complete(webViewController);
        },
      ),
    );
  }
}
  • You can use the flutter_inappwebview plugin, which is a Flutter Plugin that allows you to add inline webviews integrated with the widget tree or open an in-app browser window! It offers a lot of events, methods, and options compared to other webview plugins!  Consider a code snippet like the below:
    import 'dart:async';
    import 'package:flutter/material.dart';
    import 'package:webview_flutter/webview_flutter.dart';
    
    class WebView extends StatefulWidget {
      @override
      _WebViewState createState() => _WebViewState();
    }
    
    class _WebViewState extends State<WebView> {
    
      final Completer<WebViewController> _controller =
          Completer<WebViewController>();
    
      num _stackToView = 1;
    
      void _handleLoad(String value) {
        setState(() {
          _stackToView = 0;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              leading: Builder(builder: (BuildContext context) {
                return IconButton(
                  icon: Icon(Icons.volume_up, color: Colors.black,),
                  onPressed: () {
                    Navigator.pop(context);
                  },
                );
              }),
              backgroundColor: Colors.white10,
              elevation: 0,
            ),
            body: IndexedStack(
              index: _stackToView,
              children: [
                Column(
                  children: <Widget>[
                    Expanded(
                        child: WebView(
                      initialUrl: "https://www.google.co.in/",
                      javascriptMode: JavascriptMode.unrestricted,
                      onPageFinished: _handleLoad,
                      onWebViewCreated: (WebViewController webViewController) {
                        _controller.complete(webViewController);
                      },
                    )),
                  ],
                ),
                Container(
                  child: Center(child: CircularProgressIndicator(),)
                ),
              ],
            ));
      }
    }

    We will get output like the below:

WebView Flutter
WebView Flutter

Conclusion:

In this article, we have walked through How to Add WebView In Flutter?

Thanks for Reading !!! Keep Learning !!!

Do Share Your Valuable Feedback to Serve you much better.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply