Flutter安卓内嵌网页视图插件flutter_inappwebview_android的使用

当然，以下是如何在Flutter项目中使用flutter_inappwebview_android插件来嵌入网页视图的示例代码。这个插件允许你在Flutter应用中嵌入一个WebView并与之交互。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加flutter_inappwebview依赖（注意，虽然名字是flutter_inappwebview，但它包含了Android和iOS的支持）。

dependencies:
  flutter:
    sdk: flutter
  flutter_inappwebview: ^5.4.3+4  # 请检查最新版本号

2. 导入插件

在你的Dart文件中导入插件。

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

3. 创建WebView页面

接下来，创建一个包含WebView的页面。

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  InAppWebViewController? webViewController;  
late ChromeSafariBrowser controller;
  late CookiesManager cookiesManager;

  @override
  void
 initState() {
    super.initState();
    cookiesManager = CookiesManager();
    controller = ChromeSafariBrowser();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(        title: Text("InAppWebView Example"),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: InAppWebView(
              initialUrlRequest: URLRequest(url: Uri.parse("https://www.google.com")),
              initialOptions: InAppWebViewGroupOptions(
                crossPlatform: InAppWebViewOptions(
                  debuggingEnabled: true,
                ),
                android: AndroidInAppWebViewOptions(
                  useHybridComposition: true,
                ),
                ios: IOSInAppWebViewOptions(
                  allowsInlineMediaPlayback: true,
                ),
              ),
              onWebViewCreated: (InAppWebViewController webViewController) {
                this.webViewController = webViewController;
              },
              onLoadStart: (InAppWebViewController controller, String url) {
                print("onLoadStart $url");
              },
              onLoadStop: (InAppWebViewController controller, String url) async {
                print("onLoadStop $url");
                // 获取网页标题
                String? title = await controller.getTitle();
                setState(() {
                  // 在这里更新你的UI，例如设置AppBar的标题
                });
              },
              onConsoleMessage: (InAppWebViewController controller, ConsoleMessage consoleMessage) {
                print("onConsoleMessage: ${consoleMessage.message}");
              },
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // 示例：打开一个新的Chrome Custom Tabs窗口
          await controller.open(
            url: "https://www.flutter.dev",
            options: CustomTabsOptions(
              toolbarColor: Colors.blue,
              enableUrlBarHiding: true,
              showTitle: true,
              animation: CustomTabsAnimation.slide,
              enableDefaultShare: true,
              headers: {
                "My-Custom-Header": "custom_header_value",
              },
            ),
          );
        },
        tooltip: 'Open in Chrome Tabs',
        child: Icon(Icons.open_in_new),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    controller.dispose();
  }
}

4. 使用WebView页面

最后，在你的主应用中使用这个页面。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WebView Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WebViewPage(),
    );
  }
}

注意事项

1. 权限：确保在你的AndroidManifest.xml文件中添加了必要的权限，如INTERNET。
2. 调试：如果debuggingEnabled设置为true，你可以使用Chrome DevTools进行调试。
3. 版本兼容性：始终检查插件的最新版本和Flutter的版本兼容性。

这个示例代码展示了如何使用flutter_inappwebview插件在Flutter应用中嵌入一个WebView，并处理一些基本的事件，如页面加载开始和结束、控制台消息等。你可以根据需要进一步扩展和自定义。