三、Flutter网络加载H5页面

### 如何在 Flutter 应用程序中嵌入 HTML5 网页 为了实现这一目标，可以利用 `webview_flutter` 插件来加载外部 URL 或本地 HTML 文件。对于更复杂的交互需求，则可采用 `flutter_inappwebview` 插件。 #### 使用 webview_flutter 加载网页 安装依赖： ```yaml dependencies: flutter: sdk: flutter webview_flutter: ^4.0.0 ``` 创建 WebView 页面： ```dart import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; class WebPage extends StatefulWidget { final String url; const WebPage({Key? key, required this.url}) : super(key: key); @override State<WebPage> createState() => _WebPageState(); } class _WebPageState extends State<WebPage> { late final WebViewController controller; @override void initState() { super.initState(); // #only works on Android if (WebView.platform == null && defaultTargetPlatform == TargetPlatform.android) { WebView.platform = SurfaceAndroidWebView(); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Web Page')), body: WebViewWidget(controller: controller), ); } @override void didChangeDependencies() async{ super.didChangeDependencies(); controller = WebViewController() ..setJavaScriptMode(JavaScriptMode.unrestricted) ..loadRequest(Uri.parse(widget.url)); } } ``` 此代码片段展示了如何通过 `webview_flutter` 来展示指定URL的内容[^1]。 #### 利用 flutter_inappwebview 实现高级功能 当需要更多控制权时，比如监听页面事件、执行 JavaScript 脚本等操作，推荐使用 `flutter_inappwebview` 。其提供了更为丰富的 API 接口满足开发者的各种需求。 添加 pubspec.yaml 中的依赖项： ```yaml dependencies: flutter: sdk: flutter flutter_inappwebview: ^5.3.2+3 ``` 编写相应 Dart 逻辑： ```dart import 'package:flutter/material.dart'; import 'package:flutter_inappwebview/flutter_inappwebview.dart'; class AdvancedWebPage extends StatefulWidget { final String url; const AdvancedWebPage({Key? key, required this.url}) : super(key: key); @override State<AdvancedWebPage> createState() => _AdvancedWebPageState(); } class _AdvancedWebPageState extends State<AdvancedWebPage> { InAppWebViewController? webView; @override Widget build(BuildContext context){ return Scaffold( appBar: AppBar(title:Text("In App Browser")), body: Column(children:[ Expanded(child:InAppWebView( initialUrlRequest: URLRequest(url: Uri.parse(widget.url)), onWebViewCreated:(controller){ webView=controller; }, onLoadStart:(controller,url){ print("Started loading $url"); }, onLoadStop:(controller,url){ print("Finished loading $url"); }), ), ], ) ); } } ``` 上述例子说明了怎样借助 `flutter_inappwebview` 完成 H5 的集成工作，并且能够获取到更多的回调信息以便进一步处理业务逻辑。