Flutter网页浏览插件flutter_web_browser的使用

flutter_web_browser简介

flutter_web_browser是一个Flutter插件，它允许你以原生的方式打开网页。在Android上，它使用的是Chrome Custom Tabs；而在iOS上，则是SFSafariViewController。

需要注意的是，这个插件还在开发中，API可能会发生变化。

开始使用

安装

首先，在你的pubspec.yaml文件中添加依赖：

dependencies:
  flutter_web_browser: "^0.17.1"

然后运行flutter pub get来安装依赖。

导入库

在需要使用的Dart文件顶部导入库：

import 'package:flutter_web_browser/flutter_web_browser.dart';

打开网页

你可以通过调用FlutterWebBrowser.openWebPage()方法来打开一个网页，并且可以为不同的平台设置特定的选项：

await FlutterWebBrowser.openWebPage(
  url: "https://flutter.io/",
  customTabsOptions: const CustomTabsOptions(
    colorScheme: CustomTabsColorScheme.dark,
    toolbarColor: Colors.deepPurple,
    secondaryToolbarColor: Colors.green,
    navigationBarColor: Colors.amber,
    shareState: CustomTabsShareState.on,
    instantAppsEnabled: true,
    showTitle: true,
    urlBarHidingEnabled: true,
  ),
  safariVCOptions: const SafariViewControllerOptions(
    barCollapsingEnabled: true,
    preferredBarTintColor: Colors.green,
    preferredControlTintColor: Colors.amber,
    dismissButtonStyle: SafariViewControllerDismissButtonStyle.close,
    modalPresentationCapturesStatusBarAppearance: true,
  ),
);

示例代码

以下是一个完整的示例应用程序，展示了如何使用flutter_web_browser插件来打开网页以及监听浏览器事件。

import 'dart:async';
import 'dart:io';

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Future<void> openBrowserTab() async {
    await FlutterWebBrowser.openWebPage(url: "https://flutter.io/");
  }

  List<BrowserEvent> _events = [];

  StreamSubscription<BrowserEvent>? _browserEvents;

  @override
  void initState() {
    super.initState();

    _browserEvents = FlutterWebBrowser.events().listen((event) {
      setState(() {
        _events.add(event);
      });
    });
  }

  @override
  void dispose() {
    _browserEvents?.cancel();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Plugin example app'),
        ),
        body: Center(
          child: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                ElevatedButton(
                  onPressed: () => FlutterWebBrowser.warmup(),
                  child: Text('Warmup browser website'),
                ),
                ElevatedButton(
                  onPressed: () => openBrowserTab(),
                  child: Text('Open Flutter website'),
                ),
                ElevatedButton(
                  onPressed: () => openBrowserTab().then(
                    (value) => Future.delayed(
                      Duration(seconds: 5),
                      () => FlutterWebBrowser.close(),
                    ),
                  ),
                  child: Text('Open Flutter website & close after 5 seconds'),
                ),
                if (Platform.isAndroid) ...[
                  Text('test Android customizations'),
                  ElevatedButton(
                    onPressed: () {
                      FlutterWebBrowser.openWebPage(
                        url: "https://flutter.io/",
                        customTabsOptions: CustomTabsOptions(
                          colorScheme: CustomTabsColorScheme.dark,
                          darkColorSchemeParams: CustomTabsColorSchemeParams(
                            toolbarColor: Colors.deepPurple,
                            secondaryToolbarColor: Colors.green,
                            navigationBarColor: Colors.amber,
                            navigationBarDividerColor: Colors.cyan,
                          ),
                          shareState: CustomTabsShareState.on,
                          instantAppsEnabled: true,
                          showTitle: true,
                          urlBarHidingEnabled: true,
                        ),
                      );
                    },
                    child: Text('Open Flutter website with Android customization'),
                  ),
                ],
                if (Platform.isIOS) ...[
                  Text('test iOS customizations'),
                  ElevatedButton(
                    onPressed: () {
                      FlutterWebBrowser.openWebPage(
                        url: "https://flutter.io/",
                        safariVCOptions: SafariViewControllerOptions(
                          barCollapsingEnabled: true,
                          preferredBarTintColor: Colors.green,
                          preferredControlTintColor: Colors.amber,
                          dismissButtonStyle: SafariViewControllerDismissButtonStyle.close,
                          modalPresentationCapturesStatusBarAppearance: true,
                          modalPresentationStyle: UIModalPresentationStyle.popover,
                        ),
                      );
                    },
                    child: Text('Open Flutter website with iOS customization'),
                  ),
                  Divider(),
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    children: _events.map((e) {
                      if (e is RedirectEvent) {
                        return Text('redirect: ${e.url}');
                      }
                      if (e is CloseEvent) {
                        return Text('closed');
                      }

                      return Text('Unknown event: $e');
                    }).toList(),
                  ),
                ]
              ],
            ),
          ),
        ),
      ),
    );
  }
}

这段代码创建了一个简单的Flutter应用，其中包含多个按钮用于测试flutter_web_browser的不同功能，如预热浏览器、打开网页、带有时延关闭网页等。此外，还展示了如何根据不同的平台（Android和iOS）自定义浏览器的外观和行为。