flutter如何实现web嵌入

在Flutter中如何实现Web页面的嵌入？我想在Flutter应用内显示一个网页，但不太清楚具体该用什么组件或方法。是否需要使用webview_flutter插件？还有没有其他更简单的实现方式？另外，嵌入的Web页面与Flutter之间能否进行交互通信？希望有经验的开发者能分享一下具体的实现步骤和注意事项。

2 回复

Flutter 实现 Web 嵌入可使用 webview_flutter 插件。在 pubspec.yaml 中添加依赖，然后在代码中引入并创建 WebView 组件，设置 initialUrl 即可加载网页。

更多关于flutter如何实现web嵌入的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Flutter 实现 Web 嵌入主要通过 webview_flutter 插件，以下为具体实现步骤：

  1. 添加依赖 在 pubspec.yaml 中添加：
dependencies:
  webview_flutter: ^4.4.2
  1. 基础实现代码
import 'package:webview_flutter/webview_flutter.dart';

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('https://flutter.dev'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter WebView')),
      body: WebViewWidget(controller: controller),
    );
  }
}
  1. 核心功能配置
  • 启用 JavaScript：setJavaScriptMode(JavaScriptMode.unrestricted)
  • 加载本地 HTML：loadHtmlString()
  • 监听页面加载：setNavigationDelegate() 处理链接跳转
  • 添加权限申请（Android 需要在 AndroidManifest.xml 添加网络权限）
  1. 平台注意事项
  • Android：默认使用 Hybrid Composition，如需修改可在 AndroidManifest.xml 配置
  • iOS：无需额外配置，但需要 iOS 11.0+

此方案支持大多数网页展示需求，可通过 Controller 实现页面控制、JS 交互等高级功能。

回到顶部