How to convert flutter_web_view to HtmlElementView on web mode

user_13149007 0
Viewed 1673

This may be a duplicate question as I have seen a lot of questions that has to do with iframes, webview and all that but each one gets me more confused as I study them. Currently I am making use of the WebView widget to display a webview in my mobile app. I wish to build for the web now but WebView is not supported for web so I have been seeking for an alternative approach. I got to know about HtmlElementView from the flutter documentation. Trying to research into it but I can not seem to find any clear way I am supposed to use it to solve my problem.

Here is my code:

    Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          margin: EdgeInsets.fromLTRB(0, 15, 0, 0),
          child: !kIsWeb
              ? WebView(
                  initialUrl: this.widget._url,
                  javascriptMode: JavascriptMode.unrestricted,
                  onPageStarted: this._pageStarted,
                )
              : HtmlElementView(
                  viewType: '',
                ),
        ),
      ),
    );
  }

From my code, I am building the WebView when not compiled for web and building HtmlElementView when compiled for web. As much as I hate to say it, this is as far as my knowledge can go for now on HtmlElementView. From the docs, viewType is to take a String which I do not really know anything about.

What I wish to do exactly? The contents loaded in WebView is kind of dynamic so I wish to load same in the HtmlElementView. Any help or maybe materials that could help me in this would be so much appreciated as I am new to all these. Thanks.

dart flutter webview android
1 Answers

I'm currently on the same quest and found this handy, simple example:

https://codepen.io/riccio85/pen/wvMeaMe

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

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

  runApp( Padding(
        padding: EdgeInsets.all(25),
        child: SizedBox(
          width: 640,
          height: 360,
          child: HtmlElementView(viewType: 'hello-html'),
      ),
    ),
  );
}

It's not perfect but it seems to do what I need to. Which is to say, I also end up checking for web in the same way as your example and use webview_flutter otherwise.

Seems to be a bit of a shortcoming with the whole thing at the moment, let's hope the situation improves.

user_23759070
Related