mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
32081aab69
This PR matches the various colors of `CupertinoActionSheet` more closely with the native one. The following colors are changed. * Sheet background color * Pressed button color * Cancel button color * Pressed cancel button color * Divider color * Content text color The resulting colors match with native one with deviation of at most 1 (in terms of 0~255 RGB). The following are comparison (left to right: Native, Flutter after PR, Flutter current) <img width="1295" alt="image" src="https://github.com/flutter/flutter/assets/1596656/3703a4a8-a856-42b1-9395-a6e14b1881ca"> <img width="1268" alt="image" src="https://github.com/flutter/flutter/assets/1596656/1eb9964e-41f1-414a-99ae-0a2e7da8d3fd"> _Note: The divider thickness is adjusted to `1/dpr` instead of 0.3 in both Flutter version to make them look more native, as will be proposed in https://github.com/flutter/flutter/pull/149636._ ### Derivation All the colors are derived through color picker and calculation. The algorithm is as followed: * Assume all colors are translucent grey colors, i.e. having the same value `x` for R, G, and B, with an alpha `a`. * Given the barrier color is `x_B1=0` when the background is black, and `x_B2=204` when the background is white. * Pick the target color `x_t1` when the background is black, and `x_t2` when the background is white * Solve the following equations for `x` and `a` ``` a * x + (1-a) * x_B1 = x_t1 a * x + (1-a) * x_B2 = x_t2 a = 1 - (x_t1 - x_t2) / (x_B1 - x_B2) x = (x_t1 - (1-a) * x_B1) / a ``` These equations use a linear model for color composition, which might not be exact, but is close enough for an accuracy of (1/255). The full table is as follows: <img width="1091" alt="image" src="https://github.com/flutter/flutter/assets/1596656/0fb76291-c3cc-4bb5-aefa-03ac6ac9bf1f"> * The first two columns are colors picked from XCode. * The 3~4 columns are the colors picked from the current Flutter. Notice the deviation, which is sometimes drastic. * The 5~6 columns are the colors picked from Flutter after this PR. The deviation is at most 1. * The last few columns are calculation. * There are two rows whose calculation is based on adjusted numbers, since the original results are not accurate enough, possibly due to the linear composition. During the calculation, I assumed these colors vary between light and dark modes, but it turns out that both modes use the same set of colors. ### Screenshots
Flutter
Flutter is a new way to build high-performance, cross-platform mobile, web, and desktop apps. Flutter is optimized for today's — and tomorrow's — mobile and desktop devices. We are focused on low-latency input and high frame rates on all platforms.
See the getting started guide for information about using Flutter.