[Web] : TextStyle color does not work with backgroundColor using canvasKit

[yakou32]

1. Run flutter create bug.

2. Update the files as follows:
   Just added TextStyle:

Text(
   'You have pushed the button this many times:',
   style: TextStyle(
      color: Colors.white,
      backgroundColor: Colors.yellow,
   ),
),

3. Problem
   The problem happens with Flutter Web:

color applies a color to the text. But if a backgroundColor is added as well, then color is not applied anymore.

Expected results: White text on yellow background

Actual results: Black text on yellow background

flutter run --verbose

No issues found in the log

flutter analyze

No issues found

flutter doctor

[√] Flutter (Channel beta, 1.25.0-8.2.pre, on Microsoft Windows [version 10.0.18363.1256], locale fr-FR)

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
[√] Chrome - develop for the web
[√] Android Studio (version 4.1.0)
[√] VS Code (version 1.52.1)
[√] Connected device (2 available)

[darshankawar]

@yakou32
I tried your code sample on latest beta and seems to be working as expected.

flutter doctor -v

[✓] Flutter (Channel beta, 1.25.0-8.2.pre, on Mac OS X 10.15.4 19E2269
    darwin-x64, locale en-IN)
    • Flutter version 1.25.0-8.2.pre at /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision b0a2299859 (2 days ago), 2021-01-05 12:34:13 -0800
    • Engine revision 92ae191c17
    • Dart version 2.12.0 (build 2.12.0-133.2.beta)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/dhs/Library/Android/sdk
    • Platform android-30, build-tools 30.0.0
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0.1, Build version 12A7300
    • CocoaPods version 1.9.3

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

[✓] Android Studio (version 4.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
      1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (3 available)
    • sdk gphone x86 64 arm64 (mobile)    • emulator-5554
      • android-x64    • Android 11 (API 30) (emulator)
    • iPhone SE (2nd generation) (mobile) • 6C85835D-FBFD-4AB3-8DE8-B4FAD35E5367
      • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-0 (simulator)
    • Chrome (web)                        • chrome
      • web-javascript • Google Chrome 87.0.4280.88

• No issues found!

[yakou32]

Your answers are quite reassuring, but I don't understand what causes the issue on my dev environment.

I tried different test devices:

• Android (mobile): ok

• Chrome (web) - Version 87.0.4280.88: not ok
  

• Edge chromium (web) - Version 87.0.664.66: not ok
  

So, this is definitely a platform-web issue.

Aren't we supposed to get the same result from the bug project with the same Flutter version?

[darshankawar]

@yakou32
I see what you are saying. Using canvaskit, the behavior isn't as expected, ie:

flutter run -d chrome --dart-define=FLUTTER_WEB_USE_SKIA=true:

But with flutter run -d chrome works as expected as mentioned earlier.

flutter doctor -v

[✓] Flutter (Channel beta, 1.25.0-8.2.pre, on Mac OS X 10.15.4 19E2269
    darwin-x64, locale en-IN)
    • Flutter version 1.25.0-8.2.pre at /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision b0a2299859 (2 days ago), 2021-01-05 12:34:13 -0800
    • Engine revision 92ae191c17
    • Dart version 2.12.0 (build 2.12.0-133.2.beta)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/dhs/Library/Android/sdk
    • Platform android-30, build-tools 30.0.0
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.0.1, Build version 12A7300
    • CocoaPods version 1.9.3

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

[✓] Android Studio (version 4.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
      1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (3 available)
    • sdk gphone x86 64 arm64 (mobile)    • emulator-5554
      • android-x64    • Android 11 (API 30) (emulator)
    • iPhone SE (2nd generation) (mobile) • 6C85835D-FBFD-4AB3-8DE8-B4FAD35E5367
      • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-0 (simulator)
    • Chrome (web)                        • chrome
      • web-javascript • Google Chrome 87.0.4280.88

• No issues found!

[yakou32]

Yes, it works with flutter run -d chrome.

I'm still learning Flutter, and I hadn't perceived that various rendering options were available.

I use VS code. In my process, I just select the device, and click on Run (F5). So that seems to (silently?) involve Canvaskit...