【亲测免费】 Flutter WebView Plugin 使用教程

1. 项目介绍

Flutter WebView Plugin 是一个社区开发的插件，允许 Flutter 应用与原生 WebView 进行通信。通过这个插件，开发者可以在 Flutter 应用中嵌入 WebView，实现网页内容的展示和交互。该项目正在与 Flutter 团队紧密合作，将社区插件的功能整合到官方 WebView 插件中。

2. 项目快速启动

安装插件

首先，在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_webview_plugin: ^0.3.11

然后运行 flutter pub get 来安装插件。

示例代码

以下是一个简单的示例，展示如何使用 Flutter WebView Plugin 来启动一个全屏的 WebView：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        "/": (_) => WebviewScaffold(
              url: "https://www.google.com",
              appBar: AppBar(
                title: Text("Widget webview"),
              ),
            ),
      },
    );
  }
}

可选参数

• hidden：设置为 true 时，在页面加载过程中显示默认的加载指示器。
• initialChild：可以指定一个 Widget，在页面加载时显示。

例如：

WebviewScaffold(
  url: "https://www.google.com",
  appBar: AppBar(
    title: Text("Widget webview"),
  ),
  hidden: true,
  initialChild: Container(
    color: Colors.redAccent,
    child: Center(
      child: Text('正在加载...'),
    ),
  ),
)

3. 应用案例和最佳实践

监听 URL 变化

可以通过 FlutterWebviewPlugin 的 onUrlChanged 方法来监听 URL 变化：

final flutterWebviewPlugin = FlutterWebviewPlugin();
flutterWebviewPlugin.onUrlChanged.listen((String url) {
  print("当前 URL: $url");
});

监听滚动事件

可以监听 WebView 的滚动事件：

flutterWebviewPlugin.onScrollYChanged.listen((double offsetY) {
  print("垂直滚动偏移: $offsetY");
});

flutterWebviewPlugin.onScrollXChanged.listen((double offsetX) {
  print("水平滚动偏移: $offsetX");
});

注入 JavaScript 代码

可以在页面加载完成后注入 JavaScript 代码：

flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged state) {
  if (state.type == WebViewState.finishLoad) {
    flutterWebviewPlugin.evalJavascript("alert('页面加载完成');");
  }
});

访问本地文件

设置 withLocalUrl 为 true 以启用对本地 URL 的支持：

WebviewScaffold(
  url: "file:///path/to/local/file.html",
  withLocalUrl: true,
)

忽略 SSL 错误

设置 ignoreSSLErrors 为 true 以显示来自通常不受信任的服务器的内容：

WebviewScaffold(
  url: "https://self-signed.badssl.com/",
  ignoreSSLErrors: true,
)

4. 典型生态项目

Flutter 官方 WebView 插件

Flutter 官方团队开发的 WebView 插件，提供了更全面和稳定的支持。项目地址：flutter/plugins

其他相关插件

• flutter_inappwebview：一个功能丰富的 WebView 插件，支持更多高级功能。项目地址：fluttercommunity/flutter_inappwebview
• webview_flutter_plus：在官方 WebView 插件基础上增加了更多功能。项目地址：plus/fluttercommunity/webview_flutter_plus

通过以上教程和示例，你可以快速上手并高效使用 Flutter WebView Plugin，提升你的 Flutter 应用开发体验。