New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Display P3 wide gamut colors profile to Flutter (a.k.a. enable 25% more colors in Flutter) #55092
Comments
@brianosman I guess, you know more about this topic. Can you shed some light on it? Thanks, Brian. |
@tomasbaran @brianegan do you have plan on adding Display P3 to Flutter? |
@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. |
But looking at Apple instructions (https://developer.apple.com/videos/play/wwdc2017/821/) it may not be that difficult to implement: |
Hey all -- I seem to have been tagged on this one, but I think I'm the wrong person ^^ |
It seems none follow this issue? |
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. |
I agree with @enqvida , I thought "building beautiful UI" was a priority for Flutter.... but colors look ugly with Apple devices. |
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. |
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. |
It appears that on macOS Flutter uses Display P3 (even when it shouldn't). See #96733 (comment) |
I really need display P3 for iOS soon. Are there any developments with this issue? |
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! |
Here is some information I could gather: ChromiumExample for P3 (works on a Chrome on a Mac): Chromium has already an implementation for the P3 Color Space: Also worth a look: SkiaSkia reads and writes the Color Space in the header. SkImageInfo: contains the SkColorSpace: https://github.com/google/skia/blob/main/src/core/SkColorSpace.cpp FlutterUnsure 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 If we would have somewhere an attribute we can pass through from Flutter, we could exchange the calls here:
with this here (or something configurable actually):
Edit: What about the following:
If I got all this wrong, please let us know what needs to be done or how to approach this. Thanks, |
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. |
@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. My naive approach would be first that I change all the occurrences I mentioned above with Thanks, |
Any plans for this? |
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. |
@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! |
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. |
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 =) |
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. |
Flutter Roadmap for 2023 confirmed the interest in implementing wide color gamut support!
|
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? |
flutter/engine#39111 behind the |
Thanks, that's useful. Of course is only an iOS setting, 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
|
This is now in the beta channel. |
This was on my old computer it should be rolling around soon flutter/flutter#55092 some more animations and stuff can be added as well after flutter/flutter#48534
I should hope so, I'm actually using Flutter because it's much better on Android than React Native (which is completely unusable). Other developers seem to love the other platforms because they focus on iOS, but as for me I see Flutter's usability on Android as a trump card. Don't drop the ball on Android! |
This was on my old computer it should be rolling around soon flutter/flutter#55092 some more animations and stuff can be added as well after flutter/flutter#48534
|
@fiercepark can you file an issue if you've identified a bug, please. |
@jmagman We've upgraded an app to Flutter 3.10.1. And enabled FLTEnableWideGamut in info.plist as recommended in the flutter announcement (also tried with FLTEnableImpeller flag although that should be default in this flutter version - still no luck). On running the app the colours don't appear any differently? Is there something else I need to do in order to enable the feature? Or a certain Flutter method that replaces Color.fromRGB0(0, 209, 169,1)? |
@jabedamin wide gamut colors are only displayed if you have wide gamut images or are using gradients. Please file an issue with a screenshot if you expect wide gamut colors and aren't seeing it. |
@gaaclarke I see, I was hoping flutter objects would also support wide gamut colours in addition to images. For example Button color or Container(color: Colors.blueAccent), is that not supported? If not, any plans to support in the future? It's these colours that are sometimes more visibly dull than images. |
@jabedamin we're never going to change the existing code to mean something different. We might add new colors in the future, something like |
@gaaclarke yes that would help hugely. I suspect many others are interested in this too, in order for Flutter UIs to level up to native apps on Swift. This might be my lack of understanding on how the code behind the scenes renders colours in Flutter. I was thinking more in the sense of displaying colours based on available colour spaces on any given device. So when designing an app, if the designer uses for example RGB(0, 209, 169) on an object - this RGB code would not not change, but it would be displayed differently depending on the device and supported colour space. |
@gaaclarke and @jabedamin yeah this almost feels like a "gotcha" moment that was too good to be true. of course i appreciate the p3 support for images, i fought for it! i assumed from the title "Add Display P3 wide gamut colors profile to Flutter (a.k.a. enable 25% more colors in Flutter)" it would be 25% more colors across the entire app ui. seems a shame to have vibrant images and still a flat dull UI if it's capable. the end user is the customer and the customer likes the bright shiny silky smooth end product. what can we do to push up the priority on this? |
Okay, here's what we are going to do. This issue is very broad and I believe that the majority of what it represents has now been fulfilled on
All of that is on
If there is anything else I missed, please file an issue (including if you have found a bug in wide gamut image support). |
thank you! for those who aren't following this closely, is it ok to post this in reddit r/flutterdev to inform people? just as i thought it was a huge win, i don't think the community there knows that it's only for wide gamut images. is it ok to notify them ell them where to go to and discuss / upvote it if they find it important to them to include in the framework? i don't want to get dinged for "farming" upvotes like someone warned about |
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of |
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
The text was updated successfully, but these errors were encountered: