Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I use RGB color in Flutter?

I am trying to use it like this but it is giving me no color on text.

Color.fromARGB(1, 239 ~/ 255, 58 ~/ 255, 121 ~/ 255)
like image 754
Shehbaz Khan Avatar asked Feb 04 '19 07:02

Shehbaz Khan


People also ask

How do you enter color codes in Flutter?

Create a variable of type Color and assign the following values to it. Color myHexColor = Color(0xff123456) // Here you notice I use the 0xff and that is the opacity or transparency // of the color and you can also change these values. Use myHexColor and you are ready to go.

How do you use hex color codes?

Hex color codes start with a pound sign or hashtag (#) and are followed by six letters and/or numbers. The first two letters/numbers refer to red, the next two refer to green, and the last two refer to blue. The color values are defined in values between 00 and FF (instead of from 0 to 255 in RGB).

How do you change hex color in Flutter?

Steps to use Hexadecimal (Hex) Color Code Strings in FlutterStep 1: Remove the # sign. Step 2: Add 0xFF at the beginning of the color code. Step 3: Place it inside the Color class like this Color(0xFFbfeb91).


4 Answers

Try using

Color.fromRGBO(38, 38, 38, 0.4)

Where r is for Red, g is for Green, b is for Blueand o is for opacity

Example:

Container(
                width: double.infinity,
                height: double.infinity,
                color: Color.fromRGBO(38, 38, 38, 0.4),
                child: Center(
                  child: CircularProgressIndicator(),
                ))
like image 166
Prithvi Bhola Avatar answered Oct 19 '22 00:10

Prithvi Bhola


You can also use the hexadecimal representation Color(0XFF212845).
Comment from source

/// In other words, if AA is the alpha value in hex, RR the red value in hex,
/// GG the green value in hex, and BB the blue value in hex, a color can be
/// expressed as const Color(0xAARRGGBB).

like image 43
nonybrighto Avatar answered Oct 18 '22 22:10

nonybrighto


I am using this code block for a personal project of mine in order to show text with a specific color using Color.fromRGBO, first parameter is Red, second is Green, third is Blue and last parameter defines the Opacity.

Text(
    "This is a sample text",
     textAlign: TextAlign.center,
     style: TextStyle(
             color: Color.fromRGBO(255, 179, 102, 1)
    )
)

like image 40
Shababb Karim Avatar answered Oct 18 '22 22:10

Shababb Karim


If you want to specify opacity as a double value between 0.0 (transparent) and 1.0 (fully opaque), use Color.fromRGBO(). The opacity value is the last parameter.

Color.fromRGBO(int r, int g, int b, double opacity)

But if you want to specify opacity as an integer value between 0 (transparent) and 255 (fully opaque), use Color.fromARGB(). The opacity value is the first parameter.

Color.fromARGB(int a, int r, int g, int b)

The r, g, b parameters of both methods are integer values between 0 and 255.

like image 2
Promlert Lovichit Avatar answered Oct 18 '22 22:10

Promlert Lovichit