在Flutter应用中，嵌入网页是非常常见的需求。webview_flutter 插件提供了强大的功能来实现这一需求，并且可以通过 webview_flutter_pagecall_poc 插件实现网页与Flutter页面之间的双向通信。
1. 引入依赖
首先，在 pubspec.yaml 文件中添加 webview_flutter 和 webview_flutter_pagecall_poc 的依赖：
dependencies:
flutter:
sdk: flutter
webview_flutter: ^4.0.0
webview_flutter_pagecall_poc: ^1.0.0
然后运行 flutter pub get 来安装这些依赖。
2. 配置 Android 和 iOS
Android
确保 minSdkVersion 至少为 19：
android {
defaultConfig {
minSdkVersion 19
}
}
iOS
确保 Xcode 版本支持 WKWebView（通常 Xcode 10 及以上）。
3. 基本使用示例
以下是一个完整的示例代码，展示如何使用 webview_flutter 和 webview_flutter_pagecall_poc 插件：
// 导入必要的库
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_pagecall_poc/webview_flutter_pagecall_poc.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: WebViewPage(),
);
}
}
class WebViewPage extends StatefulWidget {
@override
_WebViewPageState createState() => _WebViewPageState();
}
class _WebViewPageState extends State
late WebViewController _controller;
@override
void initState() {
super.initState();
// 初始化 WebView 控制器
_controller = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setNavigationDelegate(NavigationDelegate(
onProgress: (int progress) {
print('Loading progress: $progress%');
},
onPageStarted: (String url) {
print('Page started loading: $url');
},
onPageFinished: (String url) {
print('Page finished loading: $url');
},
))
..loadRequest(Uri.parse('https://example.com'));
// 添加 PageCall 支持
_controller.addPageCallHandler((message) {
print('Received message from web: $message');
return 'Response from Flutter';
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('WebView with PageCall'),
),
body: WebViewWidget(controller: _controller),
);
}
}
4. 关键功能说明
4.1 加载网页
通过 WebViewController.loadRequest() 方法加载指定的 URL 或本地文件。
_controller.loadRequest(Uri.parse('https://example.com'));
4.2 设置 JavaScript 模式
允许或禁止执行 JavaScript：
_controller.setJavaScriptMode(JavaScriptMode.unrestricted);
4.3 页面导航拦截
通过 NavigationDelegate 拦截页面跳转请求：
_navigationDelegate: NavigationDelegate(
onNavigationRequest: (NavigationRequest request) {
if (request.url.startsWith('https://youtube.com')) {
return NavigationDecision.prevent; // 阻止跳转到 YouTube
}
return NavigationDecision.navigate; // 允许其他跳转
},
),
4.4 双向通信（PageCall）
使用 addPageCallHandler 注册一个处理函数，用于接收来自网页的消息并返回响应。
_controller.addPageCallHandler((message) {
print('Received message from web: $message');
return 'Response from Flutter';
});
在网页端可以调用以下 JavaScript 代码发送消息：
window.flutter_inappwebview.callHandler('pageCallHandler', 'Hello from web!');
5. 完整 Demo 效果
运行上述代码后，您将看到一个带有 WebView 的页面，能够加载指定的网页并支持从网页向 Flutter 传递消息。同时，您可以点击按钮触发 Flutter 向网页发送响应。
6. 注意事项
权限设置：确保您的 AndroidManifest.xml 文件中包含网络访问权限：
调试模式：在 Android 上启用 WebView 调试功能（可选）：
AndroidWebViewController.enableDebugging(true);