Skip to content

The default icon for iOS does not fit Apple's HIG #106110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
RockerFlower opened this issue Jun 16, 2022 · 4 comments
Closed

The default icon for iOS does not fit Apple's HIG #106110

RockerFlower opened this issue Jun 16, 2022 · 4 comments
Labels
found in release: 3.0 Found to occur in 3.0 found in release: 3.1 Found to occur in 3.1 has reproducible steps The issue has been confirmed reproducible and is ready to work on P3 Issues that are less important to the Flutter project platform-ios iOS applications specifically tool Affects the "flutter" command-line tool. See also t: labels.

Comments

@RockerFlower
Copy link
Contributor

RockerFlower commented Jun 16, 2022 •
edited
Loading

Steps to Reproduce

iOS_icon_1
This is how the application icons are displayed in the settings list, obviously with black gaps in the four corners. This is because the mask Apple uses is not the standard rounded corners, but continuous corner.

iOS_icon_2

This is a slow motion video of the app when it is opened from the home screen. The black color in the transition animation is caused by the transparent part of the icon.

This animation takes the colors of the left, bottom and right sides of the icon and then spreads the colors in all three directions, but the current icon has rounded corners, so some of the colors are missing.

Expected results:

Expect to change to a style that fits the standard mentioned here: Human Interface Guidelines

Platform Transparency Asset shape
iOS, iPadOS No Square

Actual results:
The default icon for iOS does not fit Apple's HIG.
@RockerFlower RockerFlower mentioned this issue Jun 16, 2022
Closed
8 tasks
@huycozy huycozy added the in triage Presently being triaged by the triage team label Jun 17, 2022
@huycozy
Copy link
Member

huycozy commented Jun 17, 2022

Hi @RockerFlower, thanks for filing the issue.
This issue is reproducible on the latest stable and master channels.
There are black gaps in the four corners of the icon.

This is a slow motion video of the app when it is opened from the home screen. The black color in the transition animation is caused by the transparent part of the icon.
This animation takes the colors of the left, bottom and right sides of the icon and then spreads the colors in all three directions, but the current icon has rounded corners, so some of the colors are missing.

From what I can see, this issue is the continuation of issue #23351, see #23351 (comment)

Demo

Screen Shot 2022-06-17 at 10 45 51

Screen.Recording.2022-06-17.at.11.27.25.mp4
flutter doctor -v 
[✓] Flutter (Channel stable, 3.0.2, on macOS 12.2.1 21D62 darwin-x64, locale en-VN)
    • Flutter version 3.0.2 at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision cd41fdd495 (4 days ago), 2022-06-08 09:52:13 -0700
    • Engine revision f15f824b57
    • Dart version 2.17.3
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.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
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] Android Studio (version 4.1)
    • Android Studio at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/201.7042882/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 1.8.0_242-release-1644-b3-6915495)

[✓] Android Studio
    • Android Studio at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-1/203.7185775/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
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)

[✓] IntelliJ IDEA Community Edition (version 2020.3.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

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/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

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

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 102.0.5005.115

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[✓] Flutter (Channel master, 3.1.0-0.0.pre.1284, on macOS 12.2.1 21D62 darwin-x64, locale en-VN)
    • Flutter version 3.1.0-0.0.pre.1284 at /Users/huynq/Documents/GitHub/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision fae31eecce (30 minutes ago), 2022-06-16 19:58:05 -0700
    • Engine revision f8c0dc87bc
    • Dart version 2.18.0 (build 2.18.0-189.0.dev)
    • DevTools version 2.14.0

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13E113
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.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
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] Android Studio (version 4.1)
    • Android Studio at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/201.7042882/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 1.8.0_242-release-1644-b3-6915495)

[!] Android Studio
    • Android Studio at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-1/203.7185775/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 find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] IntelliJ IDEA Community Edition (version 2020.3.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

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/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

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

[✓] Connected device (3 available)
    • Pixel 3a (mobile) • 964AY0WL20 • android-arm64  • Android 12 (API 32)
    • macOS (desktop)   • macos      • darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)      • chrome     • web-javascript • Google Chrome 102.0.5005.115

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

@huycozy huycozy added platform-ios iOS applications specifically tool Affects the "flutter" command-line tool. See also t: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on found in release: 3.0 Found to occur in 3.0 found in release: 3.1 Found to occur in 3.1 and removed in triage Presently being triaged by the triage team labels Jun 17, 2022
@RockerFlower
Copy link
Contributor Author

@huycozy Yes, it is the issue of the icon, which can be solved by replacing it with a pure white background square image without transparency.

I tried to submit a PR(#106111), but the test results said "file is not valid UTF-8".

RockerFlower pushed a commit to glorylab/flutter_packages that referenced this issue Jun 20, 2022
[flutter_template_images] Add iOS app icon assets
9606d9e 
Adds the the AppIcon and LaunchImage assets in the iOS app template while
simultaneously updating them to meet Apple's icon guidelines as of iOS.

Ref:
https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons#specifications

Issue: flutter/flutter#106110
@RockerFlower RockerFlower mentioned this issue Jun 20, 2022
Merged
11 tasks
@christopherfujino christopherfujino added P3 Issues that are less important to the Flutter project and removed P3 Issues that are less important to the Flutter project labels Jun 21, 2022
@christopherfujino christopherfujino added the P3 Issues that are less important to the Flutter project label Jul 12, 2022
RockerFlower pushed a commit to glorylab/flutter that referenced this issue Jul 18, 2022
[iOS] Update template icons
a693b5e 
Updates the AppIcon and LaunchImage assets in the iOS app template to meet Apple's icon guidelines as of iOS. Assets were moved to the [flutter_template_images][1] package, which includes them as of version 4.2.0.

Ref: https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons#specifications

Update the test on creating iOS templated icons

Validate that at least one of the iOS templated icons gets downloaded and put in the right spot.

Issue: flutter#106110

[1]: https://github.com/flutter/packages/tree/main/packages/flutter_template_images
RockerFlower pushed a commit to glorylab/flutter that referenced this issue Jul 18, 2022
[iOS] Update template icons
fcacd1f 
Updates the AppIcon and LaunchImage assets in the iOS app template to meet Apple's icon guidelines as of iOS. Assets were moved to the [flutter_template_images][1] package, which includes them as of version 4.2.0.

Ref: https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons#specifications

Update the test on creating iOS templated icons

Validate that at least one of the iOS templated icons gets downloaded and put in the right spot.

Issue: flutter#106110

[1]: https://github.com/flutter/packages/tree/main/packages/flutter_template_images
@RockerFlower RockerFlower mentioned this issue Jul 18, 2022
Merged
8 tasks
@jmagman jmagman mentioned this issue Jul 19, 2022
Closed
RockerFlower pushed a commit to glorylab/flutter that referenced this issue Jul 25, 2022
[iOS] Update template icons
aed7977 
Updates the AppIcon and LaunchImage assets in the iOS app template to meet Apple's icon guidelines as of iOS. Assets were moved to the [flutter_template_images][1] package, which includes them as of version 4.2.0.

Ref: https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons#specifications

Update the test on creating iOS templated icons

Validate that at least one of the iOS templated icons gets downloaded and put in the right spot.

Issue: flutter#106110

[1]: https://github.com/flutter/packages/tree/main/packages/flutter_template_images
@jmagman
Copy link
Member

jmagman commented Jul 30, 2022

This was fixed by #107873.

@jmagman jmagman closed this as completed Jul 30, 2022
@github-actions
Copy link

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Aug 13, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
found in release: 3.0 Found to occur in 3.0 found in release: 3.1 Found to occur in 3.1 has reproducible steps The issue has been confirmed reproducible and is ready to work on P3 Issues that are less important to the Flutter project platform-ios iOS applications specifically tool Affects the "flutter" command-line tool. See also t: labels.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Modify iOS template to fit Apple's HIG glorylab/flutter
4 participants
@jmagman @RockerFlower @christopherfujino @huycozy