Flutter中如何使用webview_flutter插件

在Flutter项目中集成webview_flutter插件时遇到问题，按照官方文档添加依赖后，运行应用却无法正常加载网页。具体表现为WebView组件显示空白，控制台也没有报错信息。请问正确的集成步骤是什么？是否需要额外配置Android或iOS端的权限？如果需要在WebView中处理JavaScript交互，应该如何实现？求一个完整的使用示例代码。

2 回复

在Flutter中使用webview_flutter插件，首先在pubspec.yaml中添加依赖，然后导入包。创建WebView组件，设置initialUrl属性即可加载网页。支持JavaScript和自定义控制器。

更多关于Flutter中如何使用webview_flutter插件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用webview_flutter插件可以方便地嵌入Web页面。以下是基本使用方法：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  webview_flutter: ^4.4.2

运行 flutter pub get 安装依赖。

2. 基本使用

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class MyWebView extends StatefulWidget {
  @override
  _MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
  late WebViewController controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView示例'),
      ),
      body: WebView(
        initialUrl: 'https://flutter.dev',
        onWebViewCreated: (WebViewController webViewController) {
          controller = webViewController;
        },
      ),
    );
  }
}

3. 主要配置选项

WebView(
  initialUrl: 'https://example.com',
  javascriptMode: JavascriptMode.unrestricted, // 启用JavaScript
  onPageStarted: (String url) {
    print('页面开始加载: $url');
  },
  onPageFinished: (String url) {
    print('页面加载完成: $url');
  },
  gestureNavigationEnabled: true, // 允许手势导航
)

4. 注意事项

  • Android配置：在 android/app/src/main/AndroidManifest.xml 中添加网络权限：
<uses-permission android:name="android.permission.INTERNET"/>
  • iOS配置：在 ios/Runner/Info.plist 中添加：
<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
<true/>
</dict>

这样就完成了WebView的基本集成，可以加载显示网页内容。

回到顶部