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: #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 #96733 (comment)

[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.

[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

[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 #39113 (comment). 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.

[ajGulati05]

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

[jmagman]

No timeline to report.

[jmagman]

P4 is default for bugs that are not currently being worked on, we are aware of its importance. Please see https://github.com/flutter/flutter/wiki/Issue-hygiene#when-will-my-bug-be-fixed for prioritization policies.

[jtkeyva]

hey @serena7889 and @StefanReinDexcom are you making any progress on this? i don't have the low level experience but maybe i can put a few bucks behind it to help expedite?

[jmagman]

Please just 👍 the issue to subscribe to changes, do not add "me too" comments--it adds noise to the issue tracker and makes it harder to find the relevant information to actually fix this issue. We know it's important, that's why it's an open issue and hasn't been closed. We actually are planning on working on it. 🙂

[rohiti]

Can someone please help me understand this issue in very layman terms? I am facing something very similar and I did an extensive research on my end, but haven't been able to figure out what exactly happens when the app runs on iOS?

Is it something like -> I give a Color code in flutter (0xFF282726) -> iOS converts this to P3 into (R: 0.1569, G: 01529, B: 0.1490) -> (Skia maybe?) Converts it back to sRGB (R: 0.1578, G: 0.1528, B: 0.1485) and this gets displayed on the screen which is a lot more dull than the original color?

Apologies for asking such a naive question on this thread, but we had spent more than 3 months in developing the first version of our app in flutter and after coming across this issue, we have to make the painful decision of writing the entire code in native for both iOS and Android for another three months. Please help me understand this, it would be great if I can apply some workaround to this to get the first version rolled out.

[gaaclarke]

@tomasbaran I just want to set expectations since the description of this issue says "25% more colors" and "Important especially for images." Supporting rendering in a wide gamut colorspace will not give you more colors from images since the file formats supported by Flutter are limited to 8bits per channel. For images in the Display P3 colorspace, you'll just get different colors (correct colors and a higher dynamic range) on the display. For images in the sRGB colorspace they will look the same.

What are the images you are trying to render? Are they jpegs in the Display P3 colorspace? What about other colorspaces like Adobe RGB?

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?

Why are you considering an option to add support instead of just doing it all the time?

[knopp]

Why are you considering an option to add support instead of just doing it all the time?

Supporting wide gamut comes with an overhead. The backing stores (surface + raster cache) would need wide gamut pixel format (i.e. bgra10_xr_srgb on Apple, which is 64bit per pixel), or separate 32 bit surface for color (10 bit per channel) + 8 bit surface for alpha, which I'm not sure skia supports.

So if application doesn't have any wide gamut contents it might be good to be able to opt-out this. Also in case when application is running on device that doesn't support wide-gamut.

[StefanReinDexcom]

@knopp Skia does support P3. It works on Chrome, which uses Skia. Chromium has an implementation for this.

Somewhere up I even showed the LOC where to start from my point of view.

**Edit: Sorry, my bad!

[knopp]

I never questioned whether Skia supports P3, my question was about support separate buffer for color attachment and alpha channel, which would allow doing wide-gamut with 40bits per pixel instead of 64.

[gaaclarke]

Thanks @knopp, that's a good assessment. I was considering the memory requirements and opt-in in my design doc. I was more fishing for the reporters' expectations. I think there are some misconceptions about what adding Display P3 will do =)

[gaaclarke]

I've written up a design doc that proposes how to implement this feature in the engine: https://docs.google.com/document/d/17C7UAaLSX2hHOq-hYENeJ1HwMhPCL-e0pb9Pn8rXUok/edit

TLDR: Expand the bitrate for render buffers and Display P3 textures to 64bits / pixel iOS and keep the color encoding in linear space. Add support for Display P3 images and smoother gradients, avoid any Dart API changes.

[Lospi]

Flutter Roadmap for 2023 confirmed the interest in implementing wide color gamut support!

Relatedly, we are investigating implementing wide color gamut support (probably starting with iOS), as it is a highly requested feature.

[leighajarett]

Hi all! We added a new flag for wide gamut support on master. It would be great to get some testers! You can enable it with this flag. Make sure you're using Impeller and that you're running the app on a real device, not a simulator. Please send me a message on discord (@leighajarett) if you're giving it a try :)

[jabedamin]

Hi all! We added a new flag for wide gamut support on master. It would be great to get some testers! You can enable it with this flag. Make sure you're using Impeller and that you're running the app on a real device, not a simulator. Please send me a message on discord (@leighajarett) if you're giving it a try :)

Great news! I'd like to test it, what version of flutter is it available from?

[jmagman]

flutter/engine#39111 behind the FLTEnableWideGamut Info.plist value on iOS only is available in Flutter 3.8.0-12.0.pre, so not quite yet in the beta channel. You'll need to try it on the master channel for now.

[jabedamin]

flutter/engine#39111 behind the FLTEnableWideGamut Info.plist value is available in Flutter 3.8.0-12.0.pre, so not quite yet in the beta channel. You'll need to try it on the master channel for now.

Thanks, that's useful. Of course is only an iOS setting, does this release also have support for android devices?

[jmagman]

does this release also have support for android devices?

No, we started with iOS. From https://docs.google.com/document/d/17C7UAaLSX2hHOq-hYENeJ1HwMhPCL-e0pb9Pn8rXUok/edit#heading=h.t6z7bji7vfnm

I propose we should prioritize iOS since it represents our largest user base with access to wide gamut displays. Other platforms can be considered later. However, I did do some research above to convince the team that we aren't painting ourselves into the proverbial corner with respect to Android.