Theme.of(context).platform running on web returns macOS instead of iOS when accessed from Safari on iPad #128943

rocboronat · 2023-06-15T12:24:48Z

Is there an existing issue for this?

I have searched the existing issues
I have read the guide to filing a bug

Steps to reproduce

Make an app that prints Theme.of(context).platform in the middle of the screen
Build it for the web
Publish it online
Access that web from Safari on iPad

If you want to see the bug by yourself in a quick fashion, for convenience, a website that reproduces the issue has been published here: https://flutterthemeplatform.codemagic.app/

Expected results

It should print iOS

Actual results

It prints macOS

Code sample

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Theme Platform',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Theme Platform"),
      ),
      body: Center(
        child: Text(
          'Theme.of(context).platform is ${Theme.of(context).platform}',
        ),
      ),
    );
  }
}

Here's the repo of this code: https://github.com/fewlaps/theme-platform-flutter

Screenshots or Video

Screenshots / Video demonstration

Logs

== Building for Web ==

> flutter build web
Resolving dependencies...
  collection 1.17.1 (1.17.2 available)
  lints 2.0.1 (2.1.1 available)
  matcher 0.12.15 (0.12.16 available)
  material_color_utilities 0.2.0 (0.5.0 available)
  source_span 1.9.1 (1.10.0 available)
  test_api 0.5.1 (0.6.0 available)
Got dependencies!

Compiling lib/main.dart for the Web...                          
Font asset "MaterialIcons-Regular.otf" was tree-shaken, reducing it from 1645184 to 7548 bytes (99.5% reduction). Tree-shaking can be disabled by providing the --no-tree-shake-icons flag when building your app.
Font asset "CupertinoIcons.ttf" was tree-shaken, reducing it from 283452 to 1236 bytes (99.6% reduction). Tree-shaking can be disabled by providing the --no-tree-shake-icons flag when building your app.
Compiling lib/main.dart for the Web...                             15.4s

Flutter Doctor output

Doctor output

roc@Pitxoli theme-platform-flutter % fvm flutter doctor -v
[!] Flutter (Channel stable, 3.10.5, on macOS 13.3.1 22E772610a darwin-arm64, locale en-ES)
    • Flutter version 3.10.5 on channel stable at /Users/roc/fvm/versions/3.10.5
    ! Warning: `dart` on your path resolves to /opt/homebrew/Cellar/dart/2.18.7/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /Users/roc/fvm/versions/3.10.5. Consider adding /Users/roc/fvm/versions/3.10.5/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 796c8ef792 (2 days ago), 2023-06-13 15:51:02 -0700
    • Engine revision 45f6e00911
    • Dart version 3.0.5
    • DevTools version 2.23.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/roc/Development/android
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.12.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] IntelliJ IDEA Community Edition (version 2022.2.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] Connected device (4 available)
    • iPhone 14 Pro Max (mobile)                     • 0DF12398-20BE-41AA-A069-77F282BF9BF5 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
    • iPad Pro (12.9-inch) (6th generation) (mobile) • DC32C696-0FD5-48B8-9627-617D11465469 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
    • macOS (desktop)                                • macos                                • darwin-arm64   • macOS 13.3.1 22E772610a darwin-arm64
    • Chrome (web)                                   • chrome                               • web-javascript • Google Chrome 114.0.5735.133

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

The text was updated successfully, but these errors were encountered:

dam-ease · 2023-06-15T13:36:24Z

Thanks for filing this issue @rocboronat . I am able to reproduce this issue when built on web on iPad.

ditman · 2023-06-15T19:00:08Z

It seems that the code that Flutter (web) is using to determine the defaultTargetPlatform on the Web is outdated:

flutter/packages/flutter/lib/src/foundation/_platform_web.dart

Lines 42 to 46 in 12f2cbc

    
           final platform.TargetPlatform _browserPlatform = () { 
        
             final String navigatorPlatform = domWindow.navigator.platform?.toLowerCase() ?? ''; 
        
             if (navigatorPlatform.startsWith('mac')) { 
        
               return platform.TargetPlatform.macOS; 
        
             }

Since macOS 13, iPads identify as "MacIntel" and further checks are required to tell them apart from a laptop machine.

See: https://stackoverflow.com/questions/57765958/how-to-detect-ipad-and-ipad-os-version-in-ios-13-and-up

nailgilaziev · 2023-10-16T17:47:30Z

Nuance to consider: domWindow.navigator.platform returns:

"MacIntel" if launched in safari, but
"IPad" if launched in Google Chrome

Checked on IPad Air 4
iPadOS 17.0.3
Chrome 118.0.5993.69

Flutter 3.13.7

Flutter 3.13.7 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 2f708eb (7 days ago) • 2023-10-09 09:58:08 -0500
Engine • revision a794cf2681
Tools • Dart 3.1.3 • DevTools 2.25.0

nailgilaziev · 2023-10-16T18:53:33Z

Safari and GoogleChrome has different userAgent strings:

safari: userAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10-15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0.1 Safari/605.1.15
chrome: userAgent: Mozilla/5.0 (iPad; CPU OS 17_0 like Mac OS X) AppleWebkit/605.1.15 (KHTML, like Gecko) CrioS/118.0.5993.69 Mobile/15E148 Safari/604.1

As a result, calling the function Theme.of(context).platform produces different results:

safari: Theme.of(context).platform == macOS
chrome: Theme.of(context).platform == iOS

code example

conditionally import file where you want to use it

import 'utils/user_agent_info.dart'
    if (dart.library.html) 'utils/user_agent_info_web.dart';

print(webUserAgent);

user_agent_info_web.dart

import 'dart:html';

String get webUserAgent {
  final userAgent = window.navigator.userAgent.toString();
  return userAgent;
}

file user_agent_info.dart is just a stub

String get webUserAgent {
  return "userAgent available only for kIsWeb build";
}

rocboronat · 2023-10-16T21:36:22Z

Thanks for these findings, @nailgilaziev! I updated the issue title and body to match them 👍

ditman · 2023-10-20T02:15:58Z

It'd be nice if this api was more widely supported:

https://developer.mozilla.org/en-US/docs/Web/API/User-Agent_Client_Hints_API

huycozy · 2023-11-09T11:41:38Z

Reproduced this issue on iPad Air 5th, iOS 17.0.3.

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.13.9, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.13.9 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision d211f42860 (11 days ago), 2023-10-25 13:42:25 -0700
    • Engine revision 0545f8705d
    • Dart version 3.1.5
    • DevTools version 2.25.0

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
    • Xcode at /Users/huynq/Downloads/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.13.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.3)
    • Android Studio at /Applications/Android Studio Giraffe.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.84.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.76.0

[✓] Connected device (4 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D                         • android-arm64  • Android 11 (API 30)
    • iPhone (mobile)  • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.7.9 19H365
    • macOS (desktop)  • macos                                    • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome                                   • web-javascript • Google Chrome 118.0.5993.117

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.17.0-5.0.pre.19, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.17.0-5.0.pre.19 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2f62af423a (55 minutes ago), 2023-11-08 20:38:07 -0500
    • Engine revision 8b490a9f16
    • Dart version 3.3.0 (build 3.3.0-107.0.dev)
    • DevTools version 2.30.0-dev.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.13.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.3)
    • Android Studio at /Applications/Android Studio Giraffe.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)

[!] Android Studio (version unknown)
    • Android Studio at /Applications/Android Studio Preview.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to determine Android Studio version.
    • Java version OpenJDK Runtime Environment (build 17.0.8+0-17.0.8b1000.22-10799086)

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.84.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.76.0

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 119.0.6045.105

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 2 categories.

fabianbrandscheid · 2024-01-05T13:05:08Z

Reproduced the issue on iPad Pro 4th, iOS 17.2

martinpelli · 2024-04-22T21:03:33Z

Maybe is related with TargetPlatform?

I have this code in my app
final isDesktopWeb = TargetPlatform.android != defaultTargetPlatform && TargetPlatform.iOS != defaultTargetPlatform && kIsWeb;

in any desktop browser it is returning true, in any android return false, so that's ok. But in iOS, tested with an iphone 15 pro and 13 its returning true

ditman · 2024-04-22T21:43:07Z

We have slightly different browser detection in the Flutter Web engine; I'm going to try to expose the engine code to the flutter framework, to make the defaultTargetPlatform consistent with what the engine thinks it's seeing.

That way, fixes on the source code of the engine will propagate to the framework as well.

ditman · 2024-05-02T01:47:05Z

Still not fixed, we need to use the browser detection in the framework. Reopening.

ditman · 2024-05-02T21:14:56Z

I have a PR open with the fix, and a demo app deployed here:

https://dit-browser-detect.web.app

Would you mind pointing your devices to that URL and see that the result is as expected? I've tried with as many devices I could get my hands on, but that's far from exhaustive :)

rocboronat · 2024-05-02T22:34:04Z

Hey @ditman, that's excellent news! ❤️

I tried with physical phones and everything works as it should:

Chrome on Windows OK
Safari on iOS OK
Chrome on iOS OK
Safari on iPad Pro OK
Chrome on iPad Pro OK
Chrome on a Samsung S22 OK

Thanks a lot!! 👌

ditman · 2024-05-02T23:11:10Z

Thanks for verifying @rocboronat!

I'm breaking a few internal google tests (around 20 thousand 💀), but it seems that the internal system hasn't picked up the engine changes yet. Once it does, I'll see the real extent of the breakage.

rocboronat · 2024-05-02T23:32:07Z

If it was 18 or 19 thousand it wouldn't be that bad... but 20K... let's wait, haha! Thanks a lot fot the effort 🙇

ditman · 2024-05-03T02:42:31Z

(The extent of the breakage is "none", so once it gets reviewed it should land easily)

> [!IMPORTANT] > Requires the following engine PR: > * flutter/engine#52380 > ---- This PR refactors Flutter `foundation`'s library `platform` for the web with the same code we use to detect platforms in the engine. ## Issues * Fixes: #128943 ## Testing Demo app deployed here: * https://dit-browser-detect.web.app

dam-ease added the platform-web Web applications specifically label Jun 15, 2023

stuartmorgan added browser: safari-ios only manifests in Safari on iOS and removed platform-ios iOS applications specifically labels Jun 15, 2023

ditman added P2 Important issues not at the top of the work list and removed f: material design flutter/packages/flutter/material repository. labels Jun 15, 2023

flutter-triage-bot bot added multiteam-retriage-candidate team-web Owned by Web platform team triaged-web Triaged by Web platform team labels Jul 8, 2023

rocboronat changed the title ~~Theme.of(context).platform running on web returns macOS instead of iOS when accessed from an iPad~~ Theme.of(context).platform running on web returns macOS instead of iOS when accessed from Safari of iPad Oct 16, 2023

rocboronat changed the title ~~Theme.of(context).platform running on web returns macOS instead of iOS when accessed from Safari of iPad~~ Theme.of(context).platform running on web returns macOS instead of iOS when accessed from Safari on iPad Oct 16, 2023

huycozy added found in release: 3.13 Found to occur in 3.13 found in release: 3.17 Found to occur in 3.17 and removed multiteam-retriage-candidate labels Nov 9, 2023

ditman mentioned this issue Apr 25, 2024

[web] Expose browser_detection through ui_web. flutter/engine#52380

Merged

8 tasks

ditman mentioned this issue Apr 25, 2024

[web] Use platform detection from Flutter web engine. #147346

Merged

9 tasks

auto-submit bot closed this as completed in flutter/engine#52380 May 2, 2024

ditman reopened this May 2, 2024

bleroux closed this as completed in NevercodeHQ/engine@b25f5d5 May 2, 2024

bleroux reopened this May 2, 2024

auto-submit bot closed this as completed in #147346 May 7, 2024

huycozy added the r: fixed Issue is closed as already fixed in a newer version label May 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Theme.of(context).platform running on web returns macOS instead of iOS when accessed from Safari on iPad #128943

Theme.of(context).platform running on web returns macOS instead of iOS when accessed from Safari on iPad #128943

rocboronat commented Jun 15, 2023 •

edited

dam-ease commented Jun 15, 2023

ditman commented Jun 15, 2023

nailgilaziev commented Oct 16, 2023

nailgilaziev commented Oct 16, 2023 •

edited

rocboronat commented Oct 16, 2023 •

edited

ditman commented Oct 20, 2023

huycozy commented Nov 9, 2023

fabianbrandscheid commented Jan 5, 2024

martinpelli commented Apr 22, 2024

ditman commented Apr 22, 2024 •

edited

ditman commented May 2, 2024

ditman commented May 2, 2024 •

edited

rocboronat commented May 2, 2024

ditman commented May 2, 2024

rocboronat commented May 2, 2024

ditman commented May 3, 2024

Theme.of(context).platform running on web returns macOS instead of iOS when accessed from Safari on iPad #128943

Theme.of(context).platform running on web returns macOS instead of iOS when accessed from Safari on iPad #128943

Comments

rocboronat commented Jun 15, 2023 • edited

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

dam-ease commented Jun 15, 2023

ditman commented Jun 15, 2023

nailgilaziev commented Oct 16, 2023

nailgilaziev commented Oct 16, 2023 • edited

rocboronat commented Oct 16, 2023 • edited

ditman commented Oct 20, 2023

huycozy commented Nov 9, 2023

fabianbrandscheid commented Jan 5, 2024

martinpelli commented Apr 22, 2024

ditman commented Apr 22, 2024 • edited

ditman commented May 2, 2024

ditman commented May 2, 2024 • edited

rocboronat commented May 2, 2024

ditman commented May 2, 2024

rocboronat commented May 2, 2024

ditman commented May 3, 2024

rocboronat commented Jun 15, 2023 •

edited

nailgilaziev commented Oct 16, 2023 •

edited

rocboronat commented Oct 16, 2023 •

edited

ditman commented Apr 22, 2024 •

edited

ditman commented May 2, 2024 •

edited