概要
どうも、@daiki1003です！Flutter 3.27では、広色域カラーのサポートが導入され、アプリの色表現がより豊かになりました。
従来のsRGB色空間よりも広いDisplay P3色空間をサポートすることで、対応デバイスではより鮮やかでリアルな色を表現できるようになりました。
- でぃすぷれいぴーすりー？
- どうやって対応するか分からない
そんなあなたに向けた記事になっています。
それでは、行ってみましょー！
広色域カラーとは？
広色域カラーとは、従来のsRGB色空間よりも広い色域を持つ色空間のことです。
sRGBはWebや多くのディスプレイで標準的に使用されている色空間ですが、人間の目で認識できる色の範囲をすべてカバーしているわけではありません。広色域カラーを使用することで、より多くの色を表現できるようになり、より自然で鮮やかな画像を表示することができます。
どんなデバイスでサポートされている？
Flutter 3.27では、dart:uiのColorクラスが更新され、広色域カラーに対応しました
ただし、2025年1月現在、広色域カラーのサポートはImpellerを使用するiOSデバイスに限定されています。
広色域カラーを使用するメリット
広色域カラーを使用することで、以下のようなメリットがあります。
- より鮮やかでリアルな画像を表示できる
- より自然な色表現が可能になる
- 対応デバイスで、より美しいグラフィックを表示できる
Colorクラスの変更点
先日のブログで挙げたように広色域カラーのサポートに伴い、Colorクラスの一部のメソッドが非推奨になりました。例えば、withOpacity()メソッドは非推奨となり、代わりにwithValues()メソッドを使用する必要があります
withValues()メソッドを使用することで、カラースペースを明示的に指定して色を操作することができます。
実際に表示してみる
sRGB：従来の色空間extendedSRGB：sRGBと下位互換性を担保しつつ、拡張された色空間displayP3：Display P3色空間
必ずしもそうなるわけではありませんが、 Display P3色空間にて鮮やかさが目立っていますね。
コピペで使えるソースコードは最後にあります。
注意点
Color クラスには様々なコンストラクタがありますが、Display P3色空間を利用するためには、 Color.from コンストラクタを利用する必要があります。
筆者はここで小一時間詰まりましたし、ChatGPT君も教えてくれませんでした。
Color.from コンストラクタでは ColorSpace を指定することができ、コメントにも ColorSpace 引数に応じて正規化されると書いてあります。
従来の Color コンストラクタや、 Color.fromARGB などの名前付きコンストラクタでは ColorSpace が sRGB 固定で指定されているので適用されません。
最後に
いかがでしたでしょうか？
色表現が豊かになることで、アプリとしての表現力が増しますね。UXなどの改善にも一躍買いそうでこれからの各社のアップデートが楽しみですね。
ソースコード
- Flutter 3.27.2
- with flutter_hooks
Twitterフォローお願いします
「次回以降も記事を読んでみたい！」「この辺分からなかったから質問したい！」
そんな時は、是非Twitter (@daiki1003)やInstagram (@ashdik_flutter)のフォローお願いします♪
Twitterコミュニティ参加お願いします
Twitterコミュニティ「Flutter lovers」を開設しました！参加お待ちしております😁
☕️ Buy me a coffee
また、記事がとても役に立ったと思う人はコーヒーを奢っていただけると非常に嬉しいです！
@daiki1003
コメント