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

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

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.

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;