Flutter平台检测插件platform

platform_detect2 是一个用于检测浏览器和操作系统类型及其版本的库。它可以帮助开发者根据不同的设备或浏览器执行特定的操作。

使用方法

以下是一个简单的使用示例：

import 'package:platform_detect2/platform_detect.dart';

void main() {
  if (browser.isChrome) {
    print('感谢你使用Chrome浏览器！');
  }

  if (operatingSystem.isMac) {
    print('🍎');
  }
}

在HTML元素上添加CSS类

该库还可以根据操作系统、浏览器或特定功能在 <html> 元素上添加CSS类。要实现这一点，可以导入 decorator.dart 并在应用的 main 函数中调用 decorateRootNodeWithPlatformClasses 方法。

示例代码

import 'package:platform_detect2/platform_detect.dart';
import 'package:platform_detect2/decorator.dart';

void main() {
  decorateRootNodeWithPlatformClasses();
}

运行后，你的 <html> 元素将看起来像这样：

<html lang="en" class="ua-chrome ua-chrome45 ua-lt-chrome46 ua-lt-chrome47 os-mac no-touch no-mstouch">
  <!-- ... -->
</html>

特性检测

默认情况下，库只会检测触摸屏支持情况（touch/mstouch）。你可以通过创建自定义的 Feature 实例并将其传递给 decorateRootNodeWithPlatformClasses 来扩展这一功能。例如，检测浏览器是否支持HTML5画布：

import 'package:platform_detect2/platform_detect.dart';
import 'package:platform_detect2/decorator.dart';

// 检测浏览器是否支持HTML5画布
var canvasFeature = new Feature('canvas', new CanvasElement().context2D != null);

void main() {
  // 装饰HTML元素
  decorateRootNodeWithPlatformClasses(features: [canvasFeature]);

  // 在其他地方使用 isSupported 字段
  if (canvasFeature.isSupported) {
    // 执行某些操作
  } else {
    // 提供备用方案或警告
  }
}

对于支持画布的浏览器，<html> 元素将包含 canvas 类：

<html lang="en" class="canvas ...">
  <!-- ... -->
</html>

而对于不支持画布的浏览器，则会包含 no-canvas 类：

<html lang="en" class="no-canvas ...">
  <!-- ... -->
</html>

完整示例代码

以下是一个完整的示例代码，展示了如何使用 platform_detect2 插件：

// ignore_for_file: invalid_use_of_visible_for_testing_member, avoid_as

import 'dart:html';
import 'package:platform_detect2/platform_detect2.dart';
import 'package:platform_detect2/src/decorator.dart';

// HTML Element IDs
const String browserIdSuffix = 'browser';
const String browserVersionIdSuffix = 'version';
const String osIdSuffix = 'os';
const String vendorIdSuffix = 'vendor';
const String appVersionIdSuffix = 'appVersion';
const String appNameIdSuffix = 'appName';
const String userAgentIdSuffix = 'userAgent';

const String currentBrowserId = 'current-$browserIdSuffix';
const String currentBrowserVersionId = 'current-$browserVersionIdSuffix';
const String currentOsId = 'current-$osIdSuffix';
const String currentVendorId = 'current-$vendorIdSuffix';
const String currentAppVersionId = 'current-$appVersionIdSuffix';
const String currentAppNameId = 'current-$appNameIdSuffix';
const String currentUserAgentId = 'current-$userAgentIdSuffix';

const String testBrowserId = 'test-$browserIdSuffix';
const String testVendorId = 'test-$vendorIdSuffix';
const String testOsId = 'test-$osIdSuffix';
const String testAppVersionId = 'test-$appVersionIdSuffix';
const String testAppNameId = 'test-$appNameIdSuffix';
const String testUserAgentId = 'test-$userAgentIdSuffix';

const String isChromeCheckboxId = 'current-is-chrome';
const String isFirefoxCheckboxId = 'current-is-firefox';
const String isSafariCheckboxId = 'current-is-safari';
const String isIeCheckboxId = 'current-is-ie';

void main() {
  decorateRootNodeWithPlatformClasses();

  _parseCurrentBrowser();
  _parseDecoratorValues();
  var evaluate = querySelector('#evaluate-test');
  evaluate?.onClick.listen((_) => _parseTestValues());
}

void _parseCurrentBrowser() {
  document.querySelector('#$currentBrowserId')?.text = browser.name;
  document.querySelector('#$currentBrowserVersionId')?.text =
      browser.version.toString();
  document.querySelector('#$currentOsId')?.text = operatingSystem.name;
  document.querySelector('#$currentVendorId')?.text = window.navigator.vendor;
  document.querySelector('#$currentAppVersionId')?.text =
      window.navigator.appVersion;
  document.querySelector('#$currentAppNameId')?.text = window.navigator.appName;
  document.querySelector('#$currentUserAgentId')?.text =
      window.navigator.userAgent;

  CheckboxInputElement? isChrome =
      document.querySelector('#$isChromeCheckboxId') as CheckboxInputElement?;
  isChrome?.checked = browser.isChrome;

  CheckboxInputElement? isFirefox =
      document.querySelector('#$isFirefoxCheckboxId') as CheckboxInputElement?;
  isFirefox?.checked = browser.isFirefox;

  CheckboxInputElement? isSafari =
      document.querySelector('#$isSafariCheckboxId') as CheckboxInputElement?;
  isSafari?.checked = browser.isSafari;

  CheckboxInputElement? isInternetExplorer =
      document.querySelector('#$isIeCheckboxId') as CheckboxInputElement?;
  isInternetExplorer?.checked = browser.isInternetExplorer;
}

void _parseTestValues() {
  InputElement? testVendorInput =
      querySelector('#$testVendorId') as InputElement?;
  InputElement? testAppVersionInput =
      querySelector('#$testAppVersionId') as InputElement?;
  InputElement? testAppNameInput =
      querySelector('#$testAppNameId') as InputElement?;
  InputElement? testUserAgentInput =
      querySelector('#$testUserAgentId') as InputElement?;

  var navigator = TestNavigator();
  navigator.vendor = testVendorInput?.value?.trim();
  navigator.appVersion = testAppVersionInput?.value?.trim();
  navigator.appName = testAppNameInput?.value?.trim();
  navigator.userAgent = testUserAgentInput?.value?.trim();
  Browser.navigator = navigator;
  OperatingSystem.navigator = navigator;

  var browser = Browser.getCurrentBrowser();
  var operatingSystem = OperatingSystem.getCurrentOperatingSystem();
  querySelector('#$testBrowserId-name')?.text = browser.name;
  querySelector('#$testBrowserId-version')?.text = browser.version.toString();
  querySelector('#$testOsId-name')?.text = operatingSystem.name;
}

void _parseDecoratorValues() {
  var htmlElementClasses = document.documentElement?.classes;

  var osDecorators = htmlElementClasses
          ?.toList()
          .where((classStr) => classStr.indexOf(osClassPrefix) > -1)
          .join(' ') ??
      '';

  var browserDecorators = htmlElementClasses
          ?.toList()
          .where((classStr) => classStr.indexOf(browserClassPrefix) > -1)
          .join(' ') ??
      '';

  String featureDecorators =
      getFeatureSupportClasses(defaultFeatureCssClassDecorators);

  querySelector('#$currentOsId-decorators')?.text = osDecorators;
  querySelector('#$currentBrowserId-decorators')?.text = browserDecorators;
  querySelector('#current-feature-decorators')?.text = featureDecorators;
}

zlyuanteng 1楼•12 天前

更多关于Flutter平台检测插件platform_detect2的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

platform_detect2 是一个用于检测当前运行平台的 Flutter 插件。它可以帮助你确定你的应用是在 Android、iOS、Web、Windows、macOS 还是 Linux 上运行。这个插件非常有用，尤其是在你需要根据平台执行不同代码逻辑时。

安装 `platform_detect2`

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

dependencies:
  flutter:
    sdk: flutter
  platform_detect2: ^1.0.0

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

使用 `platform_detect2`

安装完成后，你可以在你的 Dart 代码中使用 platform_detect2 来检测当前平台。

1. 导入包

import 'package:platform_detect2/platform_detect2.dart';

2. 检测平台

你可以使用 PlatformDetect2 类中的静态方法来检测当前平台。

void checkPlatform() {
  if (PlatformDetect2.isAndroid) {
    print('Running on Android');
  } else if (PlatformDetect2.isIOS) {
    print('Running on iOS');
  } else if (PlatformDetect2.isWeb) {
    print('Running on Web');
  } else if (PlatformDetect2.isWindows) {
    print('Running on Windows');
  } else if (PlatformDetect2.isMacOS) {
    print('Running on macOS');
  } else if (PlatformDetect2.isLinux) {
    print('Running on Linux');
  } else {
    print('Unknown platform');
  }
}

3. 获取平台信息

你还可以获取更详细的平台信息，例如操作系统版本、设备型号等。

void getPlatformInfo() {
  print('Platform: ${PlatformDetect2.platform}');
  print('OS Version: ${PlatformDetect2.osVersion}');
  print('Device Model: ${PlatformDetect2.deviceModel}');
}

示例

以下是一个完整的示例，展示了如何使用 platform_detect2 来检测平台并打印相关信息：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Platform Detect Example'),
        ),
        body: Center(
          child: PlatformInfoWidget(),
        ),
      ),
    );
  }
}

class PlatformInfoWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Platform: ${PlatformDetect2.platform}'),
        Text('OS Version: ${PlatformDetect2.osVersion}'),
        Text('Device Model: ${PlatformDetect2.deviceModel}'),
      ],
    );
  }
}

Flutter平台检测插件platform_detect2的使用