How to use Hexadecimal color strings in Flutter.

By default we get the Colors widget in Flutter which comes with set of predefined material design colors like Grey,Red,Yellow etc. But oftentimes we require custom colors in the UI of our app.

We can use the Color method which contains two constructors .fromRGBO() and .fromARGB(). So to get the color PINK, we can use either of the three functions:-

const color= Colors.pink;
const color= Color.fromRGBO(255,192,203,1)
const color= Color.fromRGBO(255,255,192,203)

Note: .fromRGBO() is short for Red Green Blue Opacity(0-1), while .fromARGB() is short for Alpha(0-255) Red Green Blue.

But what if we want to enter the hex code directly? The solution is simple.Simply replace # with 0xff to your hex code in the beginning and feed it to the Color function as an argument.Hex code for PINK is #ffc0cb. The complete code is:-

const color= Color(0xffffc0cb);

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.