Add Display P3 wide gamut colors profile to Flutter (a.k.a. enable 25% more colors in Flutter)

[tomasbaran]

Use case

25% more colors

First off, my app is full of imagery. iPhones (since iPhone 7), iPads, Macs and Android devices have been using Display P3 wide gamut for some years now. It's kinda last century to give users the old sRGB colors, when their phones support the wider P3 gamut that provides 25% larger color space. Important especially for images.

Color discrepancy btw iOS and Android

Second, I'm not sure it's related to the same issue but there is a discrepancy between colors on Android and iOS when running from the same Flutter codebase. More here: https://github.com/flutter/flutter/issues/39113

Flutter shall achieve the same quality as the native code

Third, when writing a native iOS app, you can choose which Color Profile you want to write the app in (sRGB/P3). So, when choosing to write a Flutter app (instead of a native one), you are limited and won't achieve the same results. We want to achieve the same in Flutter as in native!

Proposal

Please, add an option to choose which color Profile we want to write Flutter apps, so they truly are beautiful as they are meant be. It is one of the Flutter pillars, right?

More info by Apple, Google

• https://developer.android.com/training/wide-color-gamut
• https://developer.apple.com/videos/play/wwdc2017/821/

[tomasbaran]

@brianosman I guess, you know more about this topic. Can you shed some light on it? Thanks, Brian.

[fredlee12345678]

@tomasbaran @brianegan do you have plan on adding Display P3 to Flutter?

[tomasbaran]

@fredlee12345678 I hope @brianegan will be able to tell us more about this topic or even better I hope he or someone else will be able to implement this feature.

I just need that feature in my apps but since I'm just starting with app development—I'm not qualified for implementing it in Flutter.

[tomasbaran]

But looking at Apple instructions (https://developer.apple.com/videos/play/wwdc2017/821/) it may not be that difficult to implement:

[brianegan]

Hey all -- I seem to have been tagged on this one, but I think I'm the wrong person ^^

[fredlee12345678]

It seems none follow this issue?

[enqvida]

Wider colors profile should be one of the top priorities. We are in 2022, on devices with screens that are made for rich color presentations. Yet, no matter how great is the design of the app it still looks as soulless as windows 95.

[hiroshihorie]

I agree with @enqvida , I thought "building beautiful UI" was a priority for Flutter.... but colors look ugly with Apple devices.

[Fnalsk]

I'd also like to add that in general, I feel that optimizing Flutter for usage with mobile devices should take priority over things like windows support. I can't speak for everyone, but I'd imagine that most people using Flutter currently are using it to develop cross platform mobile apps, without particularly caring about desktop. Even if someone wanted to build a desktop app, it would have to have a completely different UI from the corresponding mobile app to deliver a good user experience.

With respect to that this issue in particular being a P4 priority feels very inappropriate. Especially since it's almost 2 years old at this point.

[ndugger]

I am personally more invested in flutter from a desktop perspective, but being stuck in legacy color space when P3 support for web is right around the corner is definitely silly. +1 to prioritizing this higher.

I only just noticed this when I tried to introduce a box shadow and noticed that it's just as choppy if not more choppy than its web counterpart; really makes subtle lighting and shadow effects difficult to implement well.

[spkersten]

It appears that on macOS Flutter uses Display P3 (even when it shouldn't). See https://github.com/flutter/flutter/issues/96733#issuecomment-1107830072

[Krispy145]

I really need display P3 for iOS soon. Are there any developments with this issue?

[kristapus]

I can't stand the way colors look on Flutter apps compared to others, when Flutter will make a use of P3 color gamut? Can't wait!

[StefanReinDexcom]

Here is some information I could gather:

Chromium

Example for P3 (works on a Chrome on a Mac): https://webkit.org/blog-files/color-gamut/

Chromium has already an implementation for the P3 Color Space: https://github.com/chromium/chromium/blob/main/ui/gfx/color_space.cc

Also worth a look: https://github.com/chromium/chromium/blob/main/ui/gfx/color_space.cc#L696 https://github.com/chromium/chromium/blob/main/ui/gfx/color_space.cc#L915

Skia

Skia reads and writes the Color Space in the header.

SkImageInfo: https://github.com/google/skia/blob/main/src/core/SkImageInfo.cpp

contains the SkColorSpace:

https://github.com/google/skia/blob/main/src/core/SkColorSpace.cpp https://github.com/google/skia/blob/main/src/core/SkICC.cpp

Flutter

Unsure where Flutter finally draws, but these here look suspicious to me:

https://github.com/flutter/engine/blob/main/shell/platform/darwin/ios/ios_surface_software.mm#L62 https://github.com/flutter/engine/blob/main/shell/common/rasterizer.cc#L286 https://github.com/flutter/engine/blob/main/flow/layers/offscreen_surface.cc#L19

If we would have somewhere an attribute we can pass through from Flutter, we could exchange the calls here:

SkColorSpace::MakeSRGB()

with this here (or something configurable actually):

SkColorSpace::MakeRGB(SkNamedTransferFn::kLinear, SkNamedGamut::kDisplayP3)

Edit:

What about the following:

1. sRGB as default Color Profile, as it already is right now.
2. Check for every image if it has an attached Color Profile which is known to Skia and if there is no override (see point 4.), use that.
3. Let the developer set a Color Profile for the apps User Interface (e.g. P3 for all the rendered Widgets).
4. Allow the developer also to override the Color Profile for the whole rendered screen (in case he does not want to have different profiles attached on images and them being also differently rendered).

If I got all this wrong, please let us know what needs to be done or how to approach this.

Thanks, Stefan

[serena7889]

Our development team has transitioned to flutter because of the speed it allows us to develop for all the platforms we're trying to reach, but with design being such an important part of out product, not being able to use DisplayP3 colors (particularly on iOS) might be a deal breaker for us.

I'd like to request the priority of this gets increased due to how drastic the difference between Flutter apps (with sRGB) and native apps (with DisplayP3). Until this is sorted, for us and many other teams, Flutter is not a viable alternative.

[StefanReinDexcom]

@serena7889 I've seen that you forked the Flutter Engine.

Could you get it working? I would be open to invest my time into this and help. Please let me know, because chances are people will try in parallel, like me (I originally would start in a couple of weeks and try myself). I've followed you and put my email into my bio on GitHub - don't know how I otherwise could email you about this.

My naive approach would be first that I change all the occurrences I mentioned above with SkNamedGamut::kDisplayP3 and then compile the code and see what happens.

Thanks, Stefan

[armandojimenez]

Any plans for this?

[Elysium-Planitia]

This limitation means Flutter isn't suitable for anything related to exact color (not only images, but also design assets that need to be rendered correctly). Until it's fixed Flutter isn't an option for those cases.

[enqvida]

@Elysium-Planitia What exactly needs to be fixed?

[Elysium-Planitia]

@enqvida It would be great if there was an option to set the color space to the one the display has. If there'd be a Flutter native way to switch the color spaces then things like displaying images and other graphics from a user would be possible. As of right now, there is no way for a Flutter application to display images in a correct way all the time. Editing is also impossible and so are the potential apps built with Flutter. This is true not only for Desktop but also for mobile devices. You could argue that it's similar to the maximum 60fps of Flutter on higher frequency screens. But missing colors is something that makes correct visual representations in the above mentioned cases impossible instead of just not as smooth as other apps might be like it is with the framerate.

[Elysium-Planitia]

I'd like to add, that the current slogan on flutter.dev is "Build apps for any screen". I want to do that but I can't.

[jabedamin]

Unfortunately most serious tech company will immediately rule flutter out from its tech stack until this is supported. Almost all smartphone displays nowadays support wide gamut color. Has anyone from Flutter even acknowledged this issue yet? Are there any plans in the roadmap to address it? @timsneath

[armandojimenez]

I don't understand how this is not a bigger issue. I don't understand how people don't notice that colors in Flutter looks washed out and lifeless. Can someone from the Flutter team please acknowledge this issue?

[jtkeyva]

does impeller address/solve this?

[jmagman]

Capturing discussion around this:

We tried color correct rendering in the past but folks didn't like SRGB colors converted to wider gamuts and the colors looking washed out [SRGB colors stretched into a wider gamut without additional conversion]. Android manufacturers choose to boost colors https://github.com/flutter/flutter/issues/39113#issuecomment-525766991. We backed out our changes in response. Also, we need a way for callers to specify the colorspace.

This would require work an API to be exposed and used by the framework to specify/grab the color profiles. Whatever pattern works with Skia would also likely work with Impeller, but would need to be implemented either way.

[jtkeyva]

There is a huge demand by professionals to support the greatest quality a device can handle. Can you re-enable and give developers a switch or declare what color space to use?

[jmagman]

Yes, it's possible this would be opt-in feature (possibly via an Info.plist key) to be plumbed through.

[jtkeyva]

@jmagman great news! Soon enough we'll be able to silence any disputes about Flutter looking dull or flat and not ready for prime time :)

[ajGulati05]

@jmagman I was wondering if there is a timeline on this? Thank you

[jmagman]

No timeline to report.