WebView in Flutter Web

Question

I am trying to display a web view in Flutter for Web but I got the following error :

PlatformException(Unregistered factory, No factory registered for viewtype 'plugins.flutter.io/webview', null)

Is there a way to display a WebView in Flutter Web ?

Answer 1

EDIT: Here is a runnable example as of May 16, 2021:

import 'dart:html';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;

void main() {
  // ignore: undefined_prefixed_name
  ui.platformViewRegistry.registerViewFactory(
      'hello-world-html',
          (int viewId) => IFrameElement()
        ..width = '640'
        ..height = '360'
        ..src = 'https://www.youtube.com/embed/IyFZznAk69U'
        ..style.border = 'none');

  runApp(Directionality(
    textDirection: TextDirection.ltr,
    child: SizedBox(
      width: 640,
      height: 360,
      child: HtmlElementView(viewType: 'hello-world-html'),
    ),
  ));
}

The remainder of this post just replicates what's above, and is the original post by the original author

You need at first perform platformViewRegistry:

  ui.platformViewRegistry.registerViewFactory(
  'hello-world-html',
  (int viewId) => IFrameElement()
    ..width = '640'
    ..height = '360'
    ..src = 'https://www.youtube.com/embed/IyFZznAk69U'
    ..style.border = 'none');

Look at that example. In that example old library was imported (on 29.09.19), but if you change 'flutter_web' on 'flutter' it have to work.

Also, you can use not only 'IFrameElement', it can be regular html:

    ui.platformViewRegistry.registerViewFactory("simple_div", (int viewId) {
  DivElement element = DivElement();
  ...
  return element;

Answer 2

You can try using the easy_web_view plugin.

For iOS and Android, it uses the native webview_flutter plugin and for the Web, it does similar things from the @alex89607 answer.

Answer 3

You can use the flutter_inappwebview plugin (I'm the author of it) version 6.x.x, which introduces Web and macOS platform support!

The current latest version 6 available is 6.0.0-beta.16.

It uses the iframe HTML element under the hood, so it's very feature-limited unfortunately.

Check the official Setup Web online docs to get started.

Answer 4

You can use webview_flutter_web plugin , it is an implementation of the webview_flutter plugin for web. currently it's limited though, it only supports

• loadRequest
• loadHtmlString

Answer 5

Answer by @mohamed-salah is helpful, however, I was only getting a loading symbol on my screen. We need put webview inside WillPopScope widget. Use the following code to properly load webview -

In pubspec.yaml add dependency

flutter_webview_plugin: ^0.3.9+1 // replace with latest version

In StatefulWidget class, use following code -

class _WebViewLoadingState extends State<Details> {
  final _webViewPlugin = FlutterWebviewPlugin();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // on pressing back button, exiting the screen instead of showing loading symbol
    _webViewPlugin.onDestroy.listen((_) {
      if (Navigator.canPop(context)) {
        // exiting the screen
        Navigator.of(context).pop();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    // WillPopScope will prevent loading
    return WillPopScope(
      child: WebviewScaffold(
        url: "https://www.google.com",
        withZoom: false,
        withLocalStorage: true,
        withJavascript: true,
        appCacheEnabled: true,
        appBar: AppBar(
          title: Text("Browser"),
        ),
      ),
      onWillPop: () {
        return _webViewPlugin.close();
      }
    );
  }
}