flutter_inappwebview插件如何使用

最近在Flutter项目中需要集成WebView功能，发现flutter_inappwebview这个插件好像挺强大的。但在使用时遇到几个问题：1）如何初始化并加载一个网页？2）能否自定义UserAgent和Cookie管理？3）怎样处理页面中的JavaScript交互？4）有没有办法监听页面加载进度和错误事件？5）iOS和Android平台是否需要特殊配置？希望有经验的朋友能分享一下具体的使用方法和注意事项。

2 回复

使用flutter_inappwebview插件，首先在pubspec.yaml中添加依赖：

dependencies:
  flutter_inappwebview: ^6.0.0

然后在代码中导入：

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

使用InAppWebView组件加载网页：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("https://example.com")),
)

支持自定义设置、JavaScript交互等功能。

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


Flutter 的 flutter_inappwebview 插件是一个功能强大的 WebView 组件，支持 Android 和 iOS 平台。以下是基本使用方法：

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: Uri.parse('https://flutter.dev')),
        onWebViewCreated: (controller) {
          webViewController = controller;
        },
        onLoadStart: (controller, url) {
          print('开始加载: $url');
        },
        onLoadStop: (controller, url) {
          print('加载完成: $url');
        },
      ),
    );
  }
}

3. 常用功能

  • JavaScript 交互：
InAppWebView(
  initialOptions: InAppWebViewGroupOptions(
    crossPlatform: InAppWebViewOptions(
      javaScriptEnabled: true,
    ),
  ),
  onLoadStop: (controller, url) async {
    // 执行 JavaScript
    var result = await controller.evaluateJavascript(
      source: "document.title"
    );
    print('页面标题: $result');
  },
)
  • 加载本地 HTML：
InAppWebView(
  initialData: InAppWebViewInitialData(
    data: """
    <html><body>
      <h1>本地 HTML</h1>
    </body></html>
    """
  ),
)
  • 添加权限（Android）： 在 android/app/src/main/AndroidManifest.xml 中添加网络权限：
<uses-permission android:name="android.permission.INTERNET" />

4. 注意事项

  • iOS 需要设置 io.flutter.embedded_views_preview 为 true
  • 可通过 InAppWebViewGroupOptions 配置平台特定选项
  • 支持文件上传、自定义 Cookie 管理等高级功能

建议查看官方文档获取最新 API 和详细配置说明。

回到顶部