A cross-platform WebView for Android, iOS and Web.

A feature-rich cross-platform webview using webview_flutter for mobile and iframe for web. JS interop-ready.

Getting started

• Gallery
• Basic usage
• Features
  • Widget properties
  • Controller properties
• Contribution
• Credits

Gallery

Mobile
Web

Basic usage

1. Create a WebViewXController inside your stateful widget

late WebViewXController webviewController;

2. Add the WebViewX widget inside the build method, and set the onWebViewCreated callback in order to retrieve the controller when the webview is initialized

WebViewX(
    initialContent: '<h2> Hello, world! </h2>',
    initialSourceType: SourceType.HTML,
    onWebViewCreated: (controller) => webviewController = controller,
    ...
    ... other options
);

Important !

If you need to add other widgets on top of the webview (e.g. inside a Stack widget), you MUST wrap those widgets with a WebViewAware widget. This does nothing on mobile, but on web it allows widgets on top to intercept gestures. Otherwise, those widgets may not be clickable and/or the iframe will behave weird (unexpected refresh/reload - this is a well known issue).

Also, if you add widgets on top of the webview, wrap them and then you notice that the iframe still reloads unexpectedly, you should check if there are other widgets that sit on top without being noticed, or try to wrap InkWell, GestureRecognizer or Button widgets to see which one causes the problem.

3. Interact with the controller (run the example app to check out some use cases)

webviewController.loadContent(
    'https://flutter.dev',
    SourceType.url,
);
webviewController.goBack();

webviewController.goForward();
...
...

Features

Note: For more detailed information about things such as EmbeddedJsContent, please visit each own's .dart file from the utils folder.

• Widget properties

• Controller properties

Contribution

Any help from the open-source community is always welcome and needed:

• Found an issue?

  • Please fill a bug report with details.

• Wish a feature?

  • Open a feature request with use cases.

• Are you using and liking the project?

  • Promote the project: create an article, do a post or make a donation.

• Are you a developer?

  • Fix a bug and send a pull request.
  • Implement a new feature.

• Have you already helped in any way?

  • Many thanks from me, the contributors and everybody that uses this project!

Credits

This package has updated the webviewx code and fixed a few issues as it isn't remain updated.