In Flutter, I want to put an RGB color as the int primary in a MaterialColor() constructor. How can I convert RGB values into a hex int formatted as such: 0xff------? Sorry for the short question, I really couldn't find it anywhere!
3
-
In which format do you expect your RGB value to be stored?Son of Stackoverflow– Son of Stackoverflow2019-09-01 17:25:38 +00:00Commented Sep 1, 2019 at 17:25
-
Material Color is set of shades of color github.com/flutter/flutter/issues/15658 api.flutter.dev/flutter/painting/ColorSwatch-class.html api.flutter.dev/flutter/dart-ui/Color-class.htmluser1462442– user14624422019-09-01 17:27:43 +00:00Commented Sep 1, 2019 at 17:27
-
I have created a custom function(s) in the form of an answer for you. Please check it and let me know if it is working as per your needs.Son of Stackoverflow– Son of Stackoverflow2019-09-01 19:12:54 +00:00Commented Sep 1, 2019 at 19:12
Add a comment
|
3 Answers
You can use the below function to convert RGB to Hex,
int hexOfRGBA(int r,int g,int b,{double opacity=1})
{
r = (r<0)?-r:r;
g = (g<0)?-g:g;
b = (b<0)?-b:b;
opacity = (opacity<0)?-opacity:opacity;
opacity = (opacity>1)?255:opacity*255;
r = (r>255)?255:r;
g = (g>255)?255:g;
b = (b>255)?255:b;
int a = opacity.toInt();
return int.parse('0x${a.toRadixString(16)}${r.toRadixString(16)}${g.toRadixString(16)}${b.toRadixString(16)}');
}
Usage:
Color(hexOfRGBA(0,0,0,opacity: 0.7));
However for some reason if you want to keep your use-case specific,
You can use the below function to convert RGB to Hex (without transparency),
int hexOfRGB(int r,int g,int b)
{
r = (r<0)?-r:r;
g = (g<0)?-g:g;
b = (b<0)?-b:b;
r = (r>255)?255:r;
g = (g>255)?255:g;
b = (b>255)?255:b;
return int.parse('0xff${r.toRadixString(16)}${g.toRadixString(16)}${b.toRadixString(16)}');
}
Usage:
Color(hexOfRGB(255,255,255));
If you want to compulsorily include transparency (i.e. RGBA),
int hexOfRGBA(int r,int g,int b,double opacity)
{
r = (r<0)?-r:r;
g = (g<0)?-g:g;
b = (b<0)?-b:b;
opacity = (opacity<0)?-opacity:opacity;
opacity = (opacity>1)?255:opacity*255;
r = (r>255)?255:r;
g = (g>255)?255:g;
b = (b>255)?255:b;
int a = opacity.toInt();
return int.parse('0x${a.toRadixString(16)}${r.toRadixString(16)}${g.toRadixString(16)}${b.toRadixString(16)}');
}
Usage:
Color(hexOfRGBA(0,0,0,0.7));
4 Comments
Riley Fitzpatrick
This worked pretty great, thanks for the comprehensive answer. The reason it is use-specific like that is because I am putting it into themeData for Flutter, which crashes if it gets anything without 100% opacity. That brings me to the one little issue I had. For some reason, when any of my RGB values gets below around 20 (They are on a slider), it crashes because it thinks that there is less than 100% opacity. Maybe its something with toRadixString() ?
Son of Stackoverflow
I have made the required changes in the answer.
Son of Stackoverflow
You faced that issue because the first function took the default value of opacity as 0 instead of 1(for our use-case).
Son of Stackoverflow
You could even extend one of the existing classes to make things look more natural.
In Flutter the Color class only accepts integers as parameters, or there is the possibility to use the named constructors fromARGB and fromRGBO.
So we only need to convert the string #b74093 to an integer value. Also we need to respect that opacity always needs to be specified. 255 (full) opacity is represented by the hexadecimal value FF. This already leaves us with 0xFF. Now, we just need to append our color string like this:
final color = const Color(0xffb74093);
The letters can by choice be capitalized or not:
final color = const Color(0xFFB74093);
Comments
String rgbToHex(int r, int g, int b) {
String hexR = r.toRadixString(16).padLeft(2, '0');
String hexG = g.toRadixString(16).padLeft(2, '0');
String hexB = b.toRadixString(16).padLeft(2, '0');
return "#$hexR$hexG$hexB";
}
