Flutter Web环境下如何判断当前运行平台为Android、iOS或桌面端？

在Flutter Web环境中，Platform类的方法（如Platform.isAndroid）无法生效，因为它依赖原生平台API。我们可以通过解析浏览器的userAgent字符串来判断当前运行平台，结合kIsWeb确保仅在Web环境下执行相关逻辑。

方法一：直接解析User Agent #

导入dart:html和package:flutter/foundation.dart，通过window.navigator.userAgent获取用户代理字符串，匹配关键字判断平台：

import 'dart:html' as html;
import 'package:flutter/foundation.dart';

bool get isWebAndroid {
  if (!kIsWeb) return false;
  return html.window.navigator.userAgent.contains('Android');
}

bool get isWebIOS {
  if (!kIsWeb) return false;
  return html.window.navigator.userAgent.contains('iPhone') || 
         html.window.navigator.userAgent.contains('iPad') ||
         html.window.navigator.userAgent.contains('iPod');
}

bool get isWebDesktop {
  if (!kIsWeb) return false;
  final userAgent = html.window.navigator.userAgent;
  return !isWebAndroid && !isWebIOS && 
         (userAgent.contains('Windows') || 
          userAgent.contains('Macintosh') || 
          userAgent.contains('Linux'));
}

使用示例：

if (isWebAndroid) {
  // 处理Android Web逻辑
} else if (isWebIOS) {
  // 处理iOS Web逻辑
} else if (isWebDesktop) {
  // 处理桌面Web逻辑
}

方法二：封装工具类 #

若需更通用的判断逻辑，可封装工具类统一管理：

import 'dart:html' as html;
import 'package:flutter/foundation.dart';

class WebPlatformUtils {
  static bool get isAndroid => kIsWeb && html.window.navigator.userAgent.contains('Android');
  static bool get isIOS => kIsWeb && (html.window.navigator.userAgent.contains('iPhone') || html.window.navigator.userAgent.contains('iPad') || html.window.navigator.userAgent.contains('iPod'));
  static bool get isDesktop => kIsWeb && !isAndroid && !isIOS && (html.window.navigator.userAgent.contains('Windows') || html.window.navigator.userAgent.contains('Macintosh') || html.window.navigator.userAgent.contains('Linux'));
}

调用示例：

if (WebPlatformUtils.isAndroid) {
  // Android Web逻辑
}

注意事项 #

• 必须通过kIsWeb做前置判断，避免非Web平台因导入dart:html报错。
• User Agent字符串可能存在差异，部分特殊设备或浏览器的UA关键字不标准，可针对性调整匹配规则。

内容的提问来源于stack exchange，提问作者Rami Dhouib