Flutter Color from hex generator
Usage
To use a color from a hexadecimal code in Flutter, you can use the Color class from the dart:ui library. This class has a constructor that takes a hexadecimal string as an argument.
Color myColor = Color(0xFFFFFFFF);
Understanding the Color and ColorSwatch classes in Flutter
Color class
In Flutter, the Color
class is used to represent a single color value. It can be created using a hex code, RGB values, or one of the predefined colors in the MaterialColor
class, such as Colors.red
or Colors.blue
. The Color
class also has various methods for manipulating and transforming the color, such as withOpacity
for adjusting the transparency of the color or withHue
for changing the hue value.
// Color from Hexcode Color colorFromHex = const Color(0xFF42A5F5); // Color from RGB Color colorFromARGB = const Color.fromARGB(255, 66, 165, 245); Color colorFromRGBO = const Color.fromRGBO(66, 165, 245, 1.0); // MaterialColor Color red = Colors.red; // Red with only 50% opacity Color red = Colors.red.withOpacity(0.5);
// Color from Hexcode Color colorFromHex = const Color(0xFF42A5F5); // Color from RGB Color colorFromARGB = const Color.fromARGB(255, 66, 165, 245); Color colorFromRGBO = const Color.fromRGBO(66, 165, 245, 1.0); // MaterialColor Color red = Colors.red; // Red with only 50% opacity Color red = Colors.red.withOpacity(0.5);
Color from RGB
// Color from ARGB -- A = alpha Color colorFromARGB = const Color.fromARGB(255, 66, 165, 245); Color colorFromRGBO = const Color.fromRGBO(66, 165, 245, 1.0);
// Color from ARGB -- A = alpha Color colorFromARGB = const Color.fromARGB(255, 66, 165, 245); Color colorFromRGBO = const Color.fromRGBO(66, 165, 245, 1.0);
To get a color from RGB values in Flutter, you can use the Color.fromRGBO
method. This method takes three integers as arguments: red
, green
, and blue
, which represent the intensity of each color channel in the range 0-255. It also takes an optional opacity
argument, which is a double value in the range 0.0-1.0 representing the transparency of the color.
Color.fromRGBO Example
Here is an example of how you can use Color.fromRGBO() to obtain a color from RGB values.
Color colorFromRGBO = const Color.fromRGBO(255, 0, 0, 1.0);
Color colorFromRGBO = const Color.fromRGBO(255, 0, 0, 1.0);
This will create a fully opaque red color.
Color.fromRGBA Example
You can also use the Color.fromARGB
method, which takes four integers as arguments: alpha
, red
, green
, and blue
. The alpha
value represents the transparency of the color in the range 0-255, with 0 being fully transparent and 255 being fully opaque.
Here is an example of how you can use Color.fromARGB() to obtain a color from RGB values.
Color color = Color.fromARGB(255, 255, 0, 0);
Color color = Color.fromARGB(255, 255, 0, 0);
This will create a fully opaque red color.
ColorSwatch class
The ColorSwatch
class is a collection of colors that are intended to be used together to define the color scheme of a user interface. It is defined using a primary color and then generates a set of derived colors based on that primary color. For example, Colors.blue
is a ColorSwatch that generates a range of shades of blue, including Colors.blue[50]
for a light blue and Colors.blue[900]
for a very dark blue.

Create your own ColorSwatch
const int _primaryColor = 0xFF3F51B5; final myCustomSwatch = const MaterialColor(_primaryColor, <int, Color>{ 50: Color(0xFFE8EAF6), 100: Color(0xFFC5CAE9), 200: Color(0xFF9FA8DA), 300: Color(0xFF7986CB), 400: Color(0xFF5C6BC0), 500: Color(_primaryColor), 600: Color(0xFF3949AB), 700: Color(0xFF303F9F), 800: Color(0xFF283593), 900: Color(0xFF1A237E), });
const int _primaryColor = 0xFF3F51B5; final myCustomSwatch = const MaterialColor(_primaryColor, <int, Color>{ 50: Color(0xFFE8EAF6), 100: Color(0xFFC5CAE9), 200: Color(0xFF9FA8DA), 300: Color(0xFF7986CB), 400: Color(0xFF5C6BC0), 500: Color(_primaryColor), 600: Color(0xFF3949AB), 700: Color(0xFF303F9F), 800: Color(0xFF283593), 900: Color(0xFF1A237E), });
In this example, the ColorSwatch
is created with a primary color of 0xFF3F51B5
and a range of shades from 50 to 900. You can specify the colors for each shade by providing a map of shade values to Color objects.
You can then use your custom ColorSwatch in your Flutter app by specifying it as the color
or backgroundColor
property of a widget. For example:
Container( color: myCustomSwatch[500], child: Text('Hello World'), )
Container( color: myCustomSwatch[500], child: Text('Hello World'), )
This will create a container with a background color of the 500 shade of your custom ColorSwatch. A easy way to create your own ColorSwatch is by using this website: ColorSwatch generetor website
Flutter change color of text
To change the color of text in Flutter, use the Text
widget's style
property and set the color
property of the TextStyle object. For example:
Text( 'This is some text', style: TextStyle( color: Colors.red, ), )
Text( 'This is some text', style: TextStyle( color: Colors.red, ), )
Alternative use TextTheme
Alternatively, you can use a Theme
to define the default text color for an entire app or a specific part. To override the default, provide a TextStyle with a different color to a Text widget. For example.
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( textTheme: TextTheme( bodyText1: TextStyle(color: Colors.black), ), ), home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Text( 'This is some text', style: Theme.of(context).textTheme.bodyText1, ), ), ); } }
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( textTheme: TextTheme( bodyText1: TextStyle(color: Colors.black), ), ), home: MyHomePage(), ); } } class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Text( 'This is some text', style: Theme.of(context).textTheme.bodyText1, ), ), ); } }
Conwclusion
In conclusion, Flutter offers a variety of tools and APIs to work with colors in your app. The Color.fromHex
method creates a Color
object from a hexadecimal string, while the Color.fromRGBO
method creates a Color
object from individual red, green, and blue component values. These tools make it easy to incorporate color into your Flutter app and create visually appealing and engaging user interfaces.