【Flutter实战】flutter_inappwebview全解析：从基础到高级功能实现

一、前言

"在混合开发中，WebView是不可或缺的组件。相比官方webview_flutter，flutter_inappwebview（版本6.0.0）支持Cookie管理、JavaScript双向通信、自定义下载等进阶功能。本文将带你全面掌握这个明星库的使用技巧。"

 

二、基础集成

1. 环境配置

# pubspec.yaml
dependencies:
  flutter_inappwebview: ^6.0.0

避坑提示：Android需在AndroidManifest.xml中添加网络权限：

2. 最小实现代码

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://flutter.dev")),
  onLoadStart: (controller, url) {
    print("开始加载: $url");
  },
)

三、核心功能实战（约400字）

1. JavaScript交互（双向通信）

// Flutter调用JS
controller.evaluateJavascript(source: "alert('Hello from Flutter!')");

// JS调用Flutter
InAppWebView(
  javascriptMode: JavascriptMode.unrestricted,
  onConsoleMessage: (controller, message) {
    print("JS日志: ${message.message}");
  },
)

2. 文件下载处理（Android/iOS适配）

onDownloadStart: (controller, url) async {
  final status = await Permission.storage.request();
  if (status.isGranted) {
    // 实现下载逻辑...
  }
}

3. 自定义注入CSS/JS

initialOptions: InAppWebViewGroupOptions(
  crossPlatform: InAppWebViewOptions(
    javaScriptEnabled: true,
    transparentBackground: true,
  ),
  platformSpecifics: PlatformInAppWebViewOptions(
    android: AndroidInAppWebViewOptions(
      useHybridComposition: true, // 解决Android闪烁问题
    )
  )
)

---

四、企业级应用技巧

1. 性能优化方案

• 启用硬件加速：androidHardwareAcceleration: true

• 预加载WebView：InAppWebViewController.preload()

2. 混合开发常见问题

• 跨域问题：通过WebViewAssetLoader加载本地HTML

• Cookie同步：使用CookieManager().setCookie()

3. 安全防护建议

contentBlockers: [
  ContentBlocker(
    trigger: ContentBlockerTrigger(urlFilter: ".*ads.*"),
    action: ContentBlockerAction.BLOCK
  )
]

最后结语：
"你在WebView开发中遇到过哪些难题？欢迎评论区留言！"