Search code examples
flutterflutterwebviewpluginflutter-inappwebview

flutter InAppWebView: how to show local html fine on IOS

I am trying to use InAppWebView on my Flutter project. I created a plugin and I want to use InAppWebView inside my plugin actually.

this is my page:

class _FormIosState extends State<FormIos> {
  final GlobalKey webViewKey = GlobalKey();
  InAppWebViewController? webViewController;
  InAppWebViewSettings settings = InAppWebViewSettings(
      isInspectable: kDebugMode,
      useOnDownloadStart: true,
      javaScriptCanOpenWindowsAutomatically: true,
      javaScriptEnabled: true,
      useShouldOverrideUrlLoading: true);
  String url = "";

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(children: <Widget>[
        Expanded(
          child: Stack(
            children: [
              InAppWebView(
                key: webViewKey,
                initialFile: "packages/myPlugin/src/web/index.html",
                // initialUrlRequest:
                //     URLRequest(url: WebUri('https://flutter.dev')),
               
                initialUserScripts: UnmodifiableListView<UserScript>([]),
                initialSettings: settings,
                onWebViewCreated: (controller) async {
                  webViewController = controller;
                },
                onLoadStart: (controller, url) async {
                  debugPrint("onLoadStart");
                },
                onPermissionRequest: (controller, request) async {
                  debugPrint("onPermission request");
                  return PermissionResponse(
                      resources: request.resources,
                      action: PermissionResponseAction.GRANT);
                },
                shouldOverrideUrlLoading: (controller, navigationAction) async {
                  debugPrint("shouldOverrideUrlLoading");
                  return NavigationActionPolicy.ALLOW;
                },
                onLoadStop: (controller, url) async {
                  debugPrint("onLoadStop");
                  setState(() {
                    this.url = url.toString();
                  });
                },
                onReceivedError: (controller, request, error) {
                  debugPrint("onReceivedError");
                },
                onUpdateVisitedHistory: (controller, url, isReload) {
                  debugPrint("onUpdateVisitedHistory");
                },
                onConsoleMessage: (controller, consoleMessage) {
                  debugPrint("onConsoleMessage");
                  print(consoleMessage);
                },
              ),
            ],
          ),
        ),
      ]),
    );
  }
}

I have a simple html inside my plugin lib/src/web, but when I am running an example inside my plugin on IOS and I want to show my index HTML nothing happens, No error and no one of all callbacks did call.

But if I comment initialFile: "packages/myPlugin/src/web/index.html", and I uncomment

initialUrlRequest: URLRequest(url: WebUri('https://flutter.dev')),

web view works and I can see flutter site on IOS.

this is my simple html:

<!DOCTYPE html><html>
<head><title>Navigation Delegate Example</title></head>
<body>
<p>
    The navigation delegate is set to block navigation to the youtube website.
</p>
<ul>
    <ul><a href="https://www.youtube.com/">https://www.youtube.com/</a></ul>
    <ul><a href="https://www.google.com/">https://www.google.com/</a></ul>
</ul>
</body>
</html>

I also put my HTML inside my plugin root assets folder :

assets:

  • assets/
  • assets/web

and I changed initialFile: "packages/mypackagename/assets/web/index.html"

nothing happend ?

Solution

  • It was a dummy issue. I am writing here maybe help others.

    assets:
 - assets/web/ // <-- count two spaces from start

    in my plugin yaml file