WebView Translation

Currently, the WOVN SDK only supports WebViews created using the webview_flutter package. However, it is possible to translate other types of WebViews using a similar approach. If you are using a different library, please contact us for assistance.

How WebView Translation Works

To enable translation for a WebView, WOVN needs to inject JavaScript into it. The JavaScript code is dynamically generated based on whether the WebView is loading local or online content, the token being used, and other parameters. Once injected, this JavaScript controls the language displayed in the WebView.

How to Translate a WebView from the webview_flutter Package

1. Each WebView should have its own controller. You need to register this controller with the WOVN SDK using the Wovn().followWebViewController(controller) method.

2. Additionally, you must call Wovn().translateWebViews() every time the WebView is loaded. This ensures the WebView is translated correctly, even if it is loaded multiple times. You may skip this step if the WebView is guaranteed to be loaded only once.

Complete example

class WebViewWithWovnScriptScreen extends StatefulWidget {
  final String title;
  const WebViewWithWovnScriptScreen({super.key, required this.title});

  @override
  State<WebViewWithWovnScriptScreen> createState() => _WebViewWithWovnScriptScreenState();
}

class _WebViewWithWovnScriptScreenState extends State<WebViewWithWovnScriptScreen> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageFinished: (String url) {
            // Call wovn to translate the webview once the page is loaded
            Wovn().translateWebViews();
          },
        ),
      )
      ..loadRequest(
          Uri.parse('https://wovn-app.neocities.org/webview/android.html?token=${Wovn().token}')
      );

    // Register the controller to WOVN SDK
    Wovn().followWebViewController(_controller, shouldTranslateImmediately: false);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: wovnAppBar(widget.title, context),
      body: WebViewWidget(
        controller: _controller,
      ),
    );
  }
}