如何在 Flutter 中实现 WebView 中的 UI 现代化？我在 Flutter 中的 WebView 控制器看起来太旧了

Question

Android 的问题

我在 Flutter 中遇到了 WebView 控制器的问题。它看起来过时了，我想知道如何使其现代化其外观。我已经研究了这个问题，但还没有找到解决方案。如果有人有 Flutter WebViews 的经验并可以提供建议，我将非常感激。在 iOS 上，WebView 控制器通常看起来很现代，但我在 Android 版本上特别遇到了 问题。我正在使用 flutter_inappwebview: ^5.8.0 包。

在 Android 中查看

在 IOS 中查看 

我的代码

return inAppWebView.InAppWebView(
      initialUrlRequest: inAppWebView.URLRequest(url: Uri.parse(args.webURL)),
      initialOptions: inAppWebView.InAppWebViewGroupOptions(
        crossPlatform: inAppWebView.InAppWebViewOptions(
            javaScriptEnabled: true,
            javaScriptCanOpenWindowsAutomatically: true,
            useOnDownloadStart: true,
            useOnLoadResource: true,
            transparentBackground: args.transparentBackground,
            cacheEnabled: false,
            clearCache: args.isClearCache),
        android: inAppWebView.AndroidInAppWebViewOptions(
          useHybridComposition: true,
          cacheMode: inAppWebView.AndroidCacheMode.LOAD_NO_CACHE,
        ),
        ios: inAppWebView.IOSInAppWebViewOptions(
          allowsInlineMediaPlayback: true,
        ),
      ),
      onWebViewCreated: (controller) async {
        await controller.addWebMessageListener(inAppWebView.WebMessageListener(
            jsObjectName: "openWebViewPage",
            onPostMessage: (message, sourceOrigin, isMainFrame, replyProxy) {
              onHandleOpenWebView(message.toString());
            }));
        await controller.addWebMessageListener(inAppWebView.WebMessageListener(
            jsObjectName: "openWebViewPageNoClearCache",
            onPostMessage: (message, sourceOrigin, isMainFrame, replyProxy) {
              onHandleOpenWebViewNoClearCache(message.toString());
            }));
        await controller.addWebMessageListener(inAppWebView.WebMessageListener(
            jsObjectName: "openAttendanceCheck",
            onPostMessage: (message, sourceOrigin, isMainFrame, replyProxy) {
              onHandleOpenAttendanceCheck();
            }));
        _inAppWebViewController.complete(controller);
        await onSubscribeInAppWebSMSListener();
      },
      onLoadStart: (controller, url) {
        updateIsLoading(true);
      },
      onLoadStop: (controller, url) {
        updateIsLoading(false);
      },
      onProgressChanged: (controller, progress) {
        updatePercentage(progress.toString());
      },
      onLoadError: (controller, url, code, message) {
        updateIsError(true);
      },
    );

Answer 1

    try using (webview_flutter: ^4.4.2)  
    
    //initialise this in state
    WebViewController _controller; 
    
    //then use this controller in body
       WebViewWidget(controller: _controller,)
//then put this function in initState

void setUpWebView() {
    late final PlatformWebViewControllerCreationParams params;
    if (WebViewPlatform.instance is WebKitWebViewPlatform) {
      params = WebKitWebViewControllerCreationParams(
        allowsInlineMediaPlayback: true,
        mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},
      );
    } else {
      params = const PlatformWebViewControllerCreationParams();
    }

    final WebViewController controller =
    WebViewController.fromPlatformCreationParams(params);

    controller
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (progress) {
            if (progress == 100) {
              setState(() {
                isLoading = false;
              });
            } else {
              setState(() {
                isLoading = true;
              });
            }
           
          },
          onPageStarted: (String url) {
            debugPrint('Page started loading: $url');
          },
          onPageFinished: (String url) {
            debugPrint('Page finished loading: $url');
          },
          onWebResourceError: (WebResourceError error) {
            debugPrint('''
Page resource error:
  code: ${error.errorCode}
  description: ${error.description}
  errorType: ${error.errorType}
  isForMainFrame: ${error.isForMainFrame}
          ''');
          },
        ),
      )
      ..addJavaScriptChannel(
        'Toaster',
        onMessageReceived: (JavaScriptMessage message) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text(message.message)),
          );
        },
      )
      ..loadRequest(Uri.parse('Replace your web view uri here.'));

    if (controller.platform is AndroidWebViewController) {
      AndroidWebViewController.enableDebugging(true);
      (controller.platform as AndroidWebViewController)
          .setMediaPlaybackRequiresUserGesture(false);
    }

    _controller = controller;

    if (!mounted) {
      return;
    }
  }