Red Border on Uncollected Items in "My Collections"

[rzambroni]

When navigating through the app and interacting with the floating action button to access "My Collections," items that I haven't collected are displayed with a red border.

Steps to Reproduce:

1. Clone the Wonderous app repository.
2. Run the app on a physical device (we used a Pixel 8 Pro)
3. Navigate through the app until you encounter a floating item that directs you to "My Collections."
4. Observe that uncollected items in the "My Collections" section have a red border.

Expected Result: Uncollected items should be displayed without a red border.

Actual Result: Uncollected items in the "My Collections" section are surrounded by a red border, which seems out of place in the app’s overall design.

Visual Evidence:

Doctor output

[✓] Flutter (Channel master, 3.25.0-1.0.pre.219, on macOS 14.6.1 23G93 darwin-arm64, locale en-US)
    • Flutter version 3.25.0-1.0.pre.219 on channel master at /Users/josefinadiz/flutter/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 6fe09872b1 (4 days ago), 2024-08-30 19:53:11 -0400
    • Engine revision 2d56e44888
    • Dart version 3.6.0 (build 3.6.0-198.0.dev)
    • DevTools version 2.39.0

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    • Android SDK at /Users/josefinadiz/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
    • Xcode at /Applications/Xcode-beta.app/Contents/Developer
    • Build 16B5001e
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2024.1)
    • 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 17.0.11+0-17.0.11b1207.24-11852314)

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

[✓] Connected device (4 available)            
    • Pixel 8 Pro (mobile)            • 3A060DLJG002D9        • android-arm64  • Android 15 (API 35)
    • macOS (desktop)                 • macos                 • darwin-arm64   • macOS 14.6.1 23G93
      darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin         • macOS 14.6.1 23G93
      darwin-arm64
    • Chrome (web)                    • chrome                • web-javascript • Google Chrome
      128.0.6613.114

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

• No issues found!

[IrfanSarwar519]

When navigating through the app and interacting with the floating action button to access "My Collections," items that I haven't collected are displayed with a red border.

Steps to Reproduce:

1. Clone the Wonderous app repository.
2. Run the app on a physical device (we used a Pixel 8 Pro)
3. Navigate through the app until you encounter a floating item that directs you to "My Collections."
4. Observe that uncollected items in the "My Collections" section have a red border.

Expected Result: Uncollected items should be displayed without a red border.

Actual Result: Uncollected items in the "My Collections" section are surrounded by a red border, which seems out of place in the app’s overall design.

Visual Evidence:

Doctor output

[✓] Flutter (Channel master, 3.25.0-1.0.pre.219, on macOS 14.6.1 23G93 darwin-arm64, locale en-US)
    • Flutter version 3.25.0-1.0.pre.219 on channel master at /Users/josefinadiz/flutter/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 6fe09872b1 (4 days ago), 2024-08-30 19:53:11 -0400
    • Engine revision 2d56e44888
    • Dart version 3.6.0 (build 3.6.0-198.0.dev)
    • DevTools version 2.39.0

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    • Android SDK at /Users/josefinadiz/Library/Android/sdk
    • Platform android-35, build-tools 35.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.1)
    • Xcode at /Applications/Xcode-beta.app/Contents/Developer
    • Build 16B5001e
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2024.1)
    • 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 17.0.11+0-17.0.11b1207.24-11852314)

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

[✓] Connected device (4 available)            
    • Pixel 8 Pro (mobile)            • 3A060DLJG002D9        • android-arm64  • Android 15 (API 35)
    • macOS (desktop)                 • macos                 • darwin-arm64   • macOS 14.6.1 23G93
      darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin         • macOS 14.6.1 23G93
      darwin-arm64
    • Chrome (web)                    • chrome                • web-javascript • Google Chrome
      128.0.6613.114

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

• No issues found!

Is it a bug? If bug can you please assign it to me?

[esDotDev]

Thanks for the report, this looks like some sort of bug within Flutter itself. Do you get the same issue on stable or beta?

[esDotDev]

Closing as we can not reproduce with the current version on a Galaxy A52 Android Device, and it's unlikely we can solve this issue anyways, it's not by design and seems to be an artifact of the drop-shadows that are applied to the images.

If you can still reproduce we could work with you to isolate this to a smaller spike and log it with the Flutter team.