Flutter浏览器检测插件browser_detector的使用

browser_detector 是一个Dart库，用于通过分析用户代理字符串来检测流行的浏览器、引擎和平台。该库可以安全地与Flutter Native一起使用。

使用方法

基本用法

import 'package:browser_detector/browser_detector.dart';

void main() {
  if (BrowserDetector().browser.isSafari) {
    print('当前浏览器是Safari');
  } else {
    print('当前浏览器不是Safari');
  }
}

自定义用户代理字符串

import 'package:browser_detector/browser_detector.dart';

void main() {
  final firefoxUserAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0';
  print(BrowserDetector(firefoxUserAgent).browser.isFirefox); // 输出: true
}

与依赖注入/服务定位器库一起使用（GetIt示例）

import 'package:get_it/get_it.dart';
import 'package:browser_detector/browser_detector.dart';

final getIt = GetIt.instance;

void main() {
  getIt.registerLazySingleton(() => BrowserDetector());

  final detector = getIt.get<BrowserDetector>();
  if (detector.browser.isChrome) {
    print('当前浏览器是Chrome');
  } else {
    print('当前浏览器不是Chrome');
  }
}

Flutter Native

该库可以安全地与Flutter Native一起使用，并且不会产生任何编译错误。当在原生模式下运行时，所有 isUnknown 测试将返回 true。

如果该库用于Flutter Web项目，则所有对象（浏览器、平台和引擎）都将被正确检测。

致谢

一些正则表达式取自 lancedickson/bowser 库。如果你需要类似的功能但使用纯JS，可以查看该库。

完整示例Demo

以下是一个完整的示例，展示了如何在Flutter项目中使用 browser_detector 插件：

1. 添加依赖

在 pubspec.yaml 文件中添加 browser_detector 依赖：

dependencies:
  flutter:
    sdk: flutter
  browser_detector: ^1.0.0
  get_it: ^7.2.0

2. 创建主文件 main.dart

import 'package:flutter/material.dart';
import 'package:browser_detector/browser_detector.dart';
import 'package:get_it/get_it.dart';

final getIt = GetIt.instance;

void main() {
  // 注册BrowserDetector
  getIt.registerLazySingleton(() => BrowserDetector());

  runApp(MyApp());
}

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String browserInfo = '';

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

  void _detectBrowser() async {
    final detector = getIt.get<BrowserDetector>();

    setState(() {
      browserInfo = '浏览器: ${detector.browser.name}\n'
          '版本: ${detector.browser.version}\n'
          '平台: ${detector.platform.name}\n'
          '引擎: ${detector.engine.name}';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '检测到的浏览器信息:',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 20),
            Text(
              browserInfo,
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

3. 运行项目

确保你已经安装了Flutter和Dart SDK，并且配置好了开发环境。然后在终端中运行以下命令：

flutter pub get
flutter run

这将启动你的Flutter应用，并显示检测到的浏览器信息。

希望这个示例对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时提问。