CODEWITHSUNDEEP
flutterdartflutter-web
Shambhav
Shambhav

Reputation: 93

How to ascertain whether the Flutter web app is running on phone or PC?

I want to use different apps on PC and mobile, so what would be the best way to find out what the device is before loading the app?

Upvotes: 8

Views: 5662

Answers (3)

Anandh Krishnan
Anandh Krishnan

Reputation: 5984

You can easily findout with this code

bool isMobile = MediaQuery.of(context).size.width < 850;
bool isTablet = MediaQuery.of(context).size.width < 1100 &&
    MediaQuery.of(context).size.width >= 850;
bool isDesktop = MediaQuery.of(context).size.width >= 1100;

Upvotes: 1

Gpack
Gpack

Reputation: 2193

As dart:io is not supported on the web, another solution is to look at the user agent (warning: a user could fake this to load the mobile or desktop version anyway).

import 'package:universal_html/html.dart' as html;

const appleType = "apple";
const androidType = "android";
const desktopType = "desktop";

String getSmartPhoneOrTablet() {
  final userAgent = html.window.navigator.userAgent.toString().toLowerCase();
  // smartphone
  if( userAgent.contains("iphone"))  return appleType;
  if( userAgent.contains("android"))  return androidType;

  // tablet
  if( userAgent.contains("ipad")) return appleType;
  if( html.window.navigator.platform.toLowerCase().contains("macintel") && html.window.navigator.maxTouchPoints > 0 ) return appleType;

  return desktopType;
}

Credit to: https://github.com/flutter/flutter/issues/41311#issuecomment-739854345

Upvotes: 10

Christopher Moore
Christopher Moore

Reputation: 17143

You can do this with the Platform class of of dart:io, which provides a few static properties that can help you determine the OS and therefore PC vs mobile.

The following return bools that help you determine each OS

isAndroid, isFuchsia, isIOS, isLinux, isMacOS, isWindows

Or you can use the operatingSystem property, which returns a String containing the OS.

Ex.

if(Platform.isWindows)
...

In general, if you see Android & iOS as the OS, you'll know it's mobile. If you see Linux, MacOS, or Windows, you'll know it's PC. And Fuchsia is a bit ambiguous.

Upvotes: 1

Related Questions