[ Mobile 4 ]

[kamilfedio]

https://github.com/Solvro/topwr-mobile/issues/10

[kamilfedio]

@simon-the-shark i am not sure about colors because when i checked them on figma, after converted to rgba then to Color in Flutter they were a bit diffent than u wrote.

[simon-the-shark]

@K4PEK Yep I see what's wrong. I translated your colors to their const equivalents correctly. However your colors were mixed up, cause CSS and Flutter use different order of bytes in the code in 8-bytes long version of hex color. So when you converted css's rbga to hex, the order of letters were mixed up. (I've learnt that just now too)

1. CSS

   The hex format is #RRGGBBAA https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color

2. Flutter/Dart

   The hex format is 0xAARRGGBB https://api.flutter.dev/flutter/dart-ui/Color-class.html

So the channels have different order and that's caused problems.

Proper colors:

So, taking your colors from figma css:

1. rgba(250, 100, 101, 0.16);

   translating to hex using some css online converter is indeed:

   #fa646528

   But in flutter the same color is:

   const Color(0x28fa6465)

2. rgba(198, 45, 46, 0.40);

   In css would be:

   #c62d2e66

   However in flutter:

   const Color(0x66c62d2e)

So basically this caused problems, but what I wrote you above I believe was proper conversions: eg. HexColor('#C62D2E66').withOpacity(.4) is basically const Color(0x662D2E66), but neither of them is the color we want.

[kamilfedio]

@simon-the-shark so now i have to wait for merge from @amtrax325 and use Iocalization from his code for text's?

[simon-the-shark]

@K4PEK You can wait or you can merge now and then make another PR with localization for your widget.