How to use hex colours directly on Flutter

Stephen Paulraj
1 min readDec 28, 2019

--

Color and ColorSwatch class obeys the Material color system, where you can make use of palettes of Material design. Unlike Xamarin or React Native you cannot use Hex color straight away.

Default approach of applying color — Flutter

Color selection = Colors.pink[400]; // Selects a mid-range pink.

Directly using Hex on colors.

usage — colors: [Color(0xff{hex}), Color(0x02{hex}) ]

Opacity comes first followed by Hex. 0XFF06292 represents 0xff as opacity and 06292 is Hex color. 0xff is 100% of opacity( where 0XFF is hexadecimal value of 255 which is 100 percent). 0X02 equals 2 which is 1 % For detail Hex values for decimal 0–255 in percentage look into this table for reference. http://online.sfsu.edu/chrism/hexval.html

Here is a simple container widget with gradient .

--

--