Device/Browser Details when running Flutter Web

Question

There is a package/plugin for Flutter Mobile (Android, iOS) for retrieving the device details, in which the the flutter application is running, device_info. What i need is a package/plugin to get the Details of the Device/Browser in which the Flutter Web application is running. If anyone can steer me in the right direction, that would be great.

Parrotfish

what kind of information you want from the device? – Periderm

Some basic information like the current browser, browser version, OS, Os Version, other basic details to identify Client in which the flutter is running – Parrotfish

Hi, @JemsheerKDc I have the same case like your question, did you find any solution for your question? – Fisherman

Answer 1

Get current device information from within the Flutter application, and it works for WEB as well as desktop apps device_info_plus

you can get following details of a browser 'browserName': describeEnum(data.browserName),

More details are there in this example https://github.com/fluttercommunity/plus_plugins/blob/main/packages/device_info_plus/example/lib/main.dart#L138

Chrysotile

Answer 2

Use this library device_info_plus: ^10.1.0

import 'package:device_info_plus/device_info_plus.dart';

final deviceInfoPlugin = DeviceInfoPlugin();
final deviceInfo = await deviceInfoPlugin.deviceInfo;
final allInfo = deviceInfo.data;
print(allInfo.toString());

Chrome Output

{
  browserName: BrowserName.chrome,
  appCodeName: Mozilla,
  appName: Netscape,
  appVersion: 5.0(WindowsNT10.0;Win64;x64)AppleWebKit/537.36(KHTML,
  likeGecko)Chrome/114.0.0.0Safari/537.36,
  deviceMemory: 8,
  language: en-US,
  languages: [
    en-US
  ],
  platform: Win32,
  product: Gecko,
  productSub: 20030107,
  userAgent: Mozilla/5.0(WindowsNT10.0;Win64;x64)AppleWebKit/537.36(KHTML,
  likeGecko)Chrome/114.0.0.0Safari/537.36,
  vendor: GoogleInc.,
  vendorSub: ,
  hardwareConcurrency: 4,
  maxTouchPoints: 0
}

Firefox Output

{
  browserName: BrowserName.firefox,
  appCodeName: Mozilla,
  appName: Netscape,
  appVersion: 5.0(Windows),
  deviceMemory: null,
  language: en-US,
  languages: [
    en-US,
    en
  ],
  platform: Win32,
  product: Gecko,
  productSub: 20100101,
  userAgent: Mozilla/5.0(WindowsNT10.0;Win64;x64;rv: 109.0)Gecko/20100101Firefox/114.0,
  vendor: ,
  vendorSub: ,
  hardwareConcurrency: 4,
  maxTouchPoints: 0
}

Microsoft Edge Output

{
  browserName: BrowserName.edge,
  appCodeName: Mozilla,
  appName: Netscape,
  appVersion: 5.0(WindowsNT10.0;Win64;x64)AppleWebKit/537.36(KHTML,
  likeGecko)Chrome/114.0.0.0Safari/537.36Edg/114.0.1823.58,
  deviceMemory: 8,
  language: en-US,
  languages: [
    en-US
  ],
  platform: Win32,
  product: Gecko,
  productSub: 20030107,
  userAgent: Mozilla/5.0(WindowsNT10.0;Win64;x64)AppleWebKit/537.36(KHTML,
  likeGecko)Chrome/114.0.0.0Safari/537.36Edg/114.0.1823.58,
  vendor: GoogleInc.,
  vendorSub: ,
  hardwareConcurrency: 4,
  maxTouchPoints: 0
}

Hearn

Answer 3

In pubspec.yaml,

device_info_plus: ^10.1.2

And here is the code to get Any Device info :

import 'package:device_info_plus/device_info_plus.dart';

DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();
if (kIsWeb) {
  WebBrowserInfo webBrowserInfo = await deviceInfo.webBrowserInfo;
  print('Running on : ${webBrowserInfo.platform}');
} else {
  if (Platform.isAndroid) {
    AndroidDeviceInfo androidInfo = await deviceInfo.androidInfo;
    print('Running on : ${androidInfo.product}');
  } else if (Platform.isIOS) {
    IosDeviceInfo iosInfo = await deviceInfo.iosInfo;
    print('Running on : ${iosInfo.utsname.machine}');
  }
}

Evette