Search code examples
flutter-web

Flutter Webview not working for Flutter web


I am trying to show a webpage in webview via URL. I have tried flutter_webview_plugin plugin but it was not working when I run the project on the browser.

Is there any another way to show the webpage in the flutter web application?


Solution

  • flutter_webview_plugin is to embed web pages inside an app. In flutter web you should use HtmlElementView widget. Most demos out there use IFrameElement to embed a webpage. You can check this easy_web_view package for handling both mobile and web platform automatically. It internally uses HTMLElementView and WebView automatically depending on the case of the deployment.

    some example is available here

    Update for adding onLoad listener

    IFrameElement iframeElement = IFrameElement()
          ..src = 'url'
          ..style.border = 'none'
          ..onLoad.listen((event) {
            // perform you logic here.
          });
    
        ui.platformViewRegistry.registerViewFactory(
          'webpage',
          (int viewId) => iframeElement,
        );
    
        return Directionality(
          textDirection: TextDirection.ltr,
          child: Center(
            child: SizedBox(
              width: double.infinity,
              height: double.infinity,
              child: HtmlElementView(viewType: 'webpage'),
            ),
          ),
        );