FLUTTER ECOSYSTEM

Workiva/platform_detect

ブラウザおよびプラットフォームの種類とバージョンを検出するためのライブラリ。

platform_detect のプロジェクト画像
Stars
20
Forks
29
最終プッシュ(UTC)
2026/07/31
プロジェクト状態
公開中
Workiva GitHub avatar
GITHUB Organization

Workiva ↗

言語DartHTMLShell

このリポジトリが公開するパッケージ

使用している依存関係

依存関係一覧 7 件

元の README

以下は英語原文のスナップショットです。最新版は GitHub をご覧ください。

README を開く / 閉じる

codecov documentation

platform_detect

A library for detecting browser and platform type and version.

Usage

A simple usage example:

import 'package:platform_detect/platform_detect.dart';

main() {
  if (browser.isChrome) {
	print('thank you for being a friend');
  }

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

Decorating the <html> element with CSS classes

This library can also be used to place CSS classes on the <html> element based on the operating system, browser, or a specific supported feature.

Add the decorator.dart import as shown in the example below, and call decorateRootNodeWithPlatformClasses within main in your application.

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

main() {
  decorateRootNodeWithPlatformClasses();
}

The <html> node of your application will now look like something like this:

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

By default, the only browser feature that the library detects for you is touch / mstouch.

You can extend this functionality to bake in a Modernizr-esque implementation by creating your own Feature instances, and passing a list of them as the features argument to decorateRootNodeWithPlatformClasses:

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

// For instance, if you need to detect whether a browser supports H5 canvas stuff...
var canvasFeature = new Feature('canvas', new CanvasElement().context2D != null);

main() {
  // Decorate HTML element
  decorateRootNodeWithPlatformClasses(features: [canvasFeature]);

  // Or use the `isSupported` field somewhere else in your app...
  if (canvasFeature.isSupported) {
    // Do something
  } else {
    // Fall back / warn / etc...
  }
}

The <html> node of your application will now look like something like this for browsers that support canvas:

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

and something like this for browsers that don't support canvas:

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