Flutter中如何使用flutter_inappwebview插件

我在Flutter项目中需要使用flutter_inappwebview插件加载网页，但遇到几个问题：

  1. 如何正确集成该插件到项目中？
  2. 怎么实现基本的网页加载功能？
  3. 如何监听网页加载进度和错误事件？
  4. 有什么方法可以实现Flutter与网页的交互通信？
  5. iOS和Android平台上需要特别注意哪些配置问题？

希望能得到详细的实现示例和常见问题解决方案。

2 回复

在Flutter中使用flutter_inappwebview插件：

  1. 添加依赖到pubspec.yaml：
dependencies:
  flutter_inappwebview: ^6.0.0
  1. 基本用法：
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://example.com")),
)
  1. 主要功能：支持JavaScript、自定义UA、文件上传、Cookie管理等。

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


在Flutter中使用flutter_inappwebview插件可以嵌入功能强大的WebView，支持自定义JavaScript交互、Cookie管理等。以下是基本使用方法：

1. 添加依赖 在pubspec.yaml中添加：

dependencies:
  flutter_inappwebview: ^6.0.0

运行 flutter pub get

2. 基本使用

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

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

class _WebViewExampleState extends State<WebViewExample> {
  late InAppWebViewController webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('InAppWebView Example')),
      body: InAppWebView(
        initialUrlRequest: URLRequest(
          url: WebUri('https://flutter.dev'),
        ),
        onWebViewCreated: (controller) {
          webViewController = controller;
        },
        onLoadStart: (controller, url) {
          print('开始加载: $url');
        },
        onLoadStop: (controller, url) {
          print('加载完成: $url');
        },
      ),
    );
  }
}

3. 主要功能

  • 加载URL：使用initialUrlRequest初始化
  • JavaScript交互：设置initialOptions启用JavaScript
initialOptions: InAppWebViewGroupOptions(
  crossPlatform: InAppWebViewOptions(
    javaScriptEnabled: true,
  ),
),
  • 执行JavaScript：
webViewController.evaluateJavascript(
  source: "alert('Hello World!')"
);

4. 注意事项

  • Android配置：在android/app/src/main/AndroidManifest.xml中添加网络权限：
<uses-permission android:name="android.permission.INTERNET" />
  • iOS配置：iOS 9+默认支持，无需额外配置

5. 常用回调

  • onLoadStart：开始加载
  • onLoadStop：加载完成
  • onProgressChanged：加载进度
  • onReceivedError：加载错误

这个插件比Flutter官方WebView功能更丰富，适合需要高级WebView功能的场景。

回到顶部