How to add a Webview in Flutter?

Question

I know its possible to add a WebView as a full page but couldn't find any sample code to do it. I assume you could use a PageView as it's base but not sure how to call the native android WebView and add it to the PageView.

Can anyone point me in the right direction?

Answer 1

You can use https://pub.dartlang.org/packages/webview_flutter

example

import 'package:webview_flutter/webview_flutter.dart';

return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView example'),
      ),
      body: const WebView(
        initialUrl: 'https://flutter.io',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );

Answer 2

Flutter doesn't have built-in support for embedded WebViews. Follow issue 730 for updates.

You can still show web content in your app, but you'll have to leave Flutter-land using the plugin system.

If you just want to open a browser, you can use the url_launcher Flutter plugin.

If you want to do something fancier (perhaps you don't want a visible address bar), you could implement a custom UIViewController ( iOS example ) and Activity ( Android example ) and use the plugin API to launch into these.

Answer 3

You can use the below dart plugin to display the Webview.Also, you can find dart plugin from this url: https://pub.dartlang.org/packages/flutter_webview_plugin

new MaterialApp(
      routes: {
        "/": (_) => new WebviewScaffold(
          url: "https://www.google.com",
          appBar: new AppBar(
            title: new Text("Widget webview"),
          ),
        ),
      },
    );

Answer 4

webview plugin works well, however it will be created over the top of every single bit of your app so you will have to add additional logic to show and hide the plugin. You can show it full screen or as a sized rectangle.

https://pub.dartlang.org/packages/flutter_webview_plugin

Answer 5

You can use Flutter webview plugin. Here is the url for the plugin https://pub.dartlang.org/packages/webview_flutter

Webview with CircularProgressIndicator Here are some screenshots. Before After

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

Answer 6

In pubspec.yml file add 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>

and this is class code:

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

Answer 7

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!

Main Classes:

• InAppWebView : Flutter Widget for adding an inline native WebView integrated into the flutter widget tree. To use InAppWebView class on iOS you need to opt-in for the embedded views preview by adding a boolean property to the app's Info.plist file, with the key io.flutter.embedded_views_preview and the value YES .
• ContextMenu : This class represents the WebView context menu.
• HeadlessInAppWebView : Class that represents a WebView in headless mode. It can be used to run a WebView in background without attaching an InAppWebView to the widget tree.
• InAppBrowser : In-App Browser using native WebView.
• ChromeSafariBrowser : In-App Browser using Chrome Custom Tabs on Android / SFSafariViewController on iOS.
• InAppLocalhostServer : This class allows you to create a simple server on http://localhost:[port]/ . The default port value is 8080 .
• CookieManager : This class implements a singleton object (shared instance) which manages the cookies used by WebView instances.
• HttpAuthCredentialDatabase : This class implements a singleton object (shared instance) which manages the shared HTTP auth credentials cache.
• WebStorageManager : This class implements a singleton object (shared instance) which manages the web storage used by WebView instances.

Here is an example that shows a WebView as full page:

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

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  InAppWebViewController _webViewController;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('InAppWebView Example'),
        ),
        body: Container(
            child: Column(children: <Widget>[
              Expanded(
                child:InAppWebView(
                    initialUrl: "https://flutter.dev/",
                    initialOptions: InAppWebViewGroupOptions(
                        crossPlatform: InAppWebViewOptions(
                          debuggingEnabled: true,
                        )
                    ),
                    onWebViewCreated: (InAppWebViewController controller) {
                      _webViewController = controller;
                    },
                    onLoadStart: (InAppWebViewController controller, String url) {

                    },
                    onLoadStop: (InAppWebViewController controller, String url) {

                    },
                ),
              ),
            ])),
      ),
    );
  }
}

Screenshot:

Answer 8

cause 'http' is forbid in Android 9

you can set:

In your android>app>src>main folder navigate to the AndroidManifest.xml

   <application
    android:name="io.flutter.app.FlutterApplication"
    android:icon="@mipmap/ic_launcher"
    android:usesCleartextTraffic="true" />

Flutter WebView Plugin error on android 9

Answer 9

Here is the full code, if you are having problems adding it to your app:

Add webview_flutter to your package's pubspec.yaml file, right under dependencies:

pubspec.yaml:

dependencies:
  webview_flutter: 

main.dart:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: const WebView(
          initialUrl: 'https://flutter.io',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      )
    );
  }
}

Answer 10

LIB: https://pub.dev/packages/webview_flutter

My implementation like this:

import 'package:webview_flutter/webview_flutter.dart';
...
return Scaffold(
      appBar: AppBar(toolbarHeight: 0),
      body: Builder(builder: (BuildContext context) {
        return WebView(
          initialUrl: 'https://flutter.dev/',
          javascriptMode: JavascriptMode.unrestricted,
          gestureNavigationEnabled: true,
          backgroundColor: const Color(0x00000000),
        );
      }),
    );