Difficulty in using webview

[eRuaro]

Hey! The example app looks kinda complex for my use case and I can't seem to get the webviewx plugin working. I want to embed a webpage in a container in Flutter web, here's what my code currently looks like.

Container(
    height: 520,
    width: 780,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(25),
),  child: WebViewX(
    initialContent: '<h2> Hello, world! </h2>',
    initialSourceType: SourceType.html,
    onWebViewCreated: (controller) => webviewController = controller,
),  

I want the initial content to be the webpage I plan to embed itself, the idea is that a user will click an icon and it will bring up a webpage. I tried changing the initialContent parameter to a link and the initialSourceType parameter to SourceType.url but that gives me an unexpected null value error when running build.

[adrianflutur]

Hi, mostly it depends on what webpage you want to embed in the webview.
On web, most webpages cannot be embedded by using SourceType.url because the web version uses an iframe (which is like a very limited mobile browser) and those webpages don't want to be embedded inside an iframe.

In this situation, what you want to use is SourceType.urlBypass. By using this, the package will basically fetch the entire webpage HTML source using a proxy server (public proxies, or your own custom proxy), then set it as the source of the iframe. This is the only way to actually make the iframe behave like the mobile webview.

You can read more about this and other limitations here #27. Let me know if you have any other questions.

[eRuaro]

I'm still getting an unexpected null value error. The webview widget is wrapped in a Container widget as shown below.

class AppWidget extends StatefulWidget {
  @override
  _AppWidgetState createState() => _AppWidgetState();
}

class _AppWidgetState extends State<AppWidget> {
  late WebViewXController webviewController;

  String src = "https://youtu.be/7ckaMSmg9x0";

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 520,
      width: 780,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(25),
        color: Colors.black,
      ),
      child: WebViewX(
        initialContent: src,
        initialSourceType: SourceType.urlBypass,
        onWebViewCreated: (controller) => webviewController = controller,
      ),
    );
  }
}

That container is then used in a Stack widget as shown below.

Stack(
      children: <Widget>[
        UbuntuBackground(),
        AppSidebar(),
        Align(
          alignment: Alignment.center,
          child: AppWidget(),
        ),
      ],
    );

I tried wrapping the Stack with a WebViewAware widget but the error still persists.

Here's the error printed in the log

The relevant error-causing widget was
Container
lib\widgets\app_widget.dart:16
When the exception was thrown, this was the stack
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 236:49      throw_
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 518:63  nullCheck
packages/webviewx/src/view/impl/web.dart 355:39                                                                                <fn>
packages/webviewx/src/view/impl/web.dart 357:52                                                                                [_createIFrame]
packages/webviewx/src/view/impl/web.dart 159:14                                                                                initState

[adrianflutur]

I think I see what the issue is, but first..

Is embedding a youtube video your goal? If so, then you may use the original SourceType.url and change your youtube url to it's embeddable version (see this).

Now about the issue.
You get a null check error because webview's own width or height are null.

I'll fix this, but until then you can set the width and height of the webview to the ones you set on the outer Container.

[eRuaro]

No, I'm just using youtube videos as like the src for practicing in using this plugin. My goal is to embed my hashnode, and buymeacoffee page to the web application I'm developing.

[adrianflutur]

Hi, the null error has been addressed. You can check out the changes here

As for embedding buymeacoffee and things alike, you should be able to do that without any issues but..my opinion is that you could do it easier by just using the underlying HtmlElementView to create a simple div or a button, instead of using webviewx's iframe

[adrianflutur]

Closing this for now, please open another issue if you still need help or encounter any other issues.