Flutter Linux WebView插件flutter_linux_webview的使用

flutter_linux_webview 是一个为 webview_flutter (v3.0.4) 提供Linux桌面实现的插件，它使用CEF（Chromium Embedded Framework）来渲染WebView。以下是如何在Flutter项目中使用该插件的详细指南。

支持的平台

该插件已经在一些平台上进行了验证，但在其他平台上可能会出现挂起或崩溃的情况。具体可以查看 validation_report.md 文件了解不同平台上的验证结果。

运行示例项目

进入 example/ 目录并运行项目以查看实际效果。

使用步骤

1. 添加依赖

在 pubspec.yaml 文件中添加 flutter_linux_webview 和 webview_flutter 作为依赖项：

dependencies:
  webview_flutter: ^3.0.4
  flutter_linux_webview: ^0.1.0

可以通过命令行添加这些依赖：

$ flutter pub add flutter_linux_webview:'^0.1.0'
$ flutter pub add webview_flutter:'^3.0.4'

2. 修改 linux/CMakeLists.txt

在你的应用的 linux/CMakeLists.txt 文件中添加以下命令：

include(flutter/ephemeral/.plugin_symlinks/flutter_linux_webview/linux/cmake/link_to_cef_library.cmake)

注意：此命令必须放在以下字符串之后：

add_executable(${BINARY_NAME})

如果未添加上述配置，插件将无法正常工作。

3. 导入并设置

在 Dart 代码中导入必要的包：

import 'package:webview_flutter/webview_flutter.dart';
import 'package:flutter_linux_webview/flutter_linux_webview.dart';

在创建第一个 WebView 之前，必须调用 LinuxWebViewPlugin.initialize() 方法，并且需要设置 WebView.platform = LinuxWebView(); 来配置 WebView 使用Linux实现。

以下是完整的示例代码：

import 'dart:async';
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:flutter_linux_webview/flutter_linux_webview.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化插件
  LinuxWebViewPlugin.initialize(options: <String, String?>{
    'user-agent': 'UA String',
    'remote-debugging-port': '8888',
    'autoplay-policy': 'no-user-gesture-required',
  });

  // 配置WebView使用Linux实现
  WebView.platform = LinuxWebView();

  runApp(const MaterialApp(home: _WebViewExample()));
}

class _WebViewExample extends StatefulWidget {
  const _WebViewExample({Key? key}) : super(key: key);

  [@override](/user/override)
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<_WebViewExample> with WidgetsBindingObserver {
  final Completer<WebViewController> _controller = Completer<WebViewController>();

  [@override](/user/override)
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  [@override](/user/override)
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  [@override](/user/override)
  Future<AppExitResponse> didRequestAppExit() async {
    await LinuxWebViewPlugin.terminate();
    return AppExitResponse.exit;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('flutter_linux_webview example'),
      ),
      body: WebView(
        initialUrl: 'https://flutter.dev',
        initialCookies: const [
          WebViewCookie(name: 'mycookie', value: 'foo', domain: 'flutter.dev')
        ],
        onWebViewCreated: (WebViewController webViewController) {
          _controller.complete(webViewController);
        },
        javascriptMode: JavascriptMode.unrestricted,
      ),
      floatingActionButton: favoriteButton(),
    );
  }

  Widget favoriteButton() {
    return FutureBuilder<WebViewController>(
      future: _controller.future,
      builder: (BuildContext context, AsyncSnapshot<WebViewController> controller) {
        if (controller.hasData) {
          return FloatingActionButton(
            onPressed: () async {
              final String useragent = await controller.data!.runJavascriptReturningResult('navigator.userAgent');
              final String title = await controller.data!.getTitle();
              final String url = await controller.data!.currentUrl();
              final String cookies = await controller.data!.runJavascriptReturningResult('document.cookie');
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text('userAgent: $useragent, title: $title, url: $url, cookie: $cookies'),
                ),
              );
            },
            child: const Icon(Icons.favorite),
          );
        }
        return Container();
      },
    );
  }
}