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

Answer 1

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 {
  InAppWebViewController _webViewController;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('InAppWebView Example'),
        ),
        body: Container(
            child: Column(children: [
              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: