Elevation in Dark Mode only works with #121212

[bernaferrari]

There is a really weird bug in how Flutter deals with elevation in cards. If you make:

Card(elevation: 24, color: Color(0xff121212) or Card(elevation: 24, color: Color(0xff121213) the result will be COMPLETELY different. It seems the card is hard-coded to only work correctly when elevation set to 121212.

Might be related: #40122
I tried to use applyElevationOverlayColor, no differences.

➜ flutter doctor -v
[✓] Flutter (Channel dev, v1.10.2, on Mac OS X 10.14.6 18G95, locale en-BR)
    • Flutter version 1.10.2 at /usr/local/Cellar/flutter/dev
    • Framework revision f5733f7a62 (2 days ago), 2019-09-11 21:03:42 -0700
    • Engine revision 7ea9884ab0
    • Dart version 2.5.0 (build 2.5.0-dev.4.0 be66176534)


[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/bernardoferrari/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling
      support)
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /Users/bernardoferrari/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/191.5791312/Android
      Studio 3.5 Preview.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_202-release-1483-b49-5587405)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 10.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.3, Build version 10G8
    • CocoaPods version 1.7.3

[✓] Android Studio (version 3.5)
    • Android Studio at /Users/bernardoferrari/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/191.5791312/Android
      Studio 3.5 Preview.app/Contents
    • Flutter plugin version 39.0.3
    • Dart plugin version 191.8423
    • Java version OpenJDK Runtime Environment (build
      1.8.0_202-release-1483-b49-5587405)

[✓] Android Studio
    • Android Studio at /Users/bernardoferrari/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-1/192.5863777/Android
      Studio 3.6 Preview.app/Contents
    • Flutter plugin version 39.0.4
    • Dart plugin version 192.6527
    • Java version OpenJDK Runtime Environment (build
      1.8.0_212-release-1586-b4-5784211)

[✓] IntelliJ IDEA Ultimate Edition (version 2019.2.2)
    • IntelliJ at /Users/bernardoferrari/Applications/JetBrains Toolbox/IntelliJ
      IDEA Ultimate.app
    • Flutter plugin version 38.2.4
    • Dart plugin version 192.6459

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

[✓] Connected device (1 available)
    • Android SDK built for x86 64 • emulator-5554 • android-x64 • Android 10
      (API 29) (emulator)

• No issues found!

[bernaferrari]

Same issue with FAB and Bottom Navigation Bar, even when setting by Theme.from(colorScheme...).

[HansMuller]

CC @darrenaustin

[darrenaustin]

This is actually intentional, although in hindsight we were being too conservative with the implementation for fear of breaking existing apps. The restriction here is that we only apply the overlay if the color of the Material widget is the same as the colorScheme.surface color (which happens to be #121212 in the default material dark theme). This is documented in the description of ThemeData.applyElevationOverlayColor.

That said, looking at it again this does seem too restrictive. I will look at relaxing this and just have it apply the overlay when the ThemeData.applyElevationOverlayColor is set regardless of the widget's color.

[bernaferrari]

@darrenaustin in Android native development, the color you choose for a card is not the color you see - exactly like that above, #121212 + any elevation != #121212. It was a breaking change (probably not even documented, but it was).

I think Flutter should be consistent, the output of Theme.from(colorScheme...) should be similar to setting the color, even if that leads to an additional attribute, like the applyElevationOverlayColor you just mentioned. Can't wait. Thanks.