platform_detect 1.4.0

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>

example/main.dart

// ignore_for_file: invalid_use_of_visible_for_testing_member

import 'dart:html';
import 'package:platform_detect/platform_detect.dart';
import 'package:platform_detect/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';

main() {
  decorateRootNodeWithPlatformClasses();

  _parseCurrentBrowser();
  _parseDecoratorValues();
  ButtonElement 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');
  isChrome.checked = browser.isChrome;

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

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

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

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

  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() {
  CssClassSet htmlElementClasses = document.documentElement.classes;

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

  String 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;
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  platform_detect: ^1.4.0

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter pub get

Alternatively, your editor might support pub get or flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:platform_detect/platform_detect.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
91
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
80
Overall:
Weighted score of the above. [more]
91
Learn more about scoring.

We analyzed this package on Jan 21, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.4

Maintenance issues and suggestions

Provide a file named CHANGELOG.md. (-20 points)

Changelog entries help developers follow the progress of your package. See the example generated by stagehand.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.4.0 <3.0.0
meta ^1.0.4 1.1.8
pub_semver ^1.4.2 1.4.2
Transitive dependencies
collection 1.14.12
Dev dependencies
build_runner ^1.7.1
build_test ^0.10.9
build_web_compilers ^2.5.1
test ^1.9.1