There are basically 4 types of color formats supported by Flutter which is Hex Color code, ARGB, RGBA and Color constants. App developer can define color in all formats according to his requirement. In this tutorial we would learn about all there colors formats and how to Use Different Color Formats Hex ARGB RGBO in Flutter Dart Android iOS mobile application.
List of Color all Formats:
1. Hex Color code : Hex color code is used with prefix ( 0xff + Hex color code ) format. Here first character is Zero.
Example: Color(0xFF42A5F5) .
2. ARGB Color code : Alpha Red Green Blue Color code. ARGB color code is define with Color.fromARGB(Pass Color Integer Value) function.
Example : Color.fromARGB(255, 255, 128, 0) .
3. RGBA Color code : RGBA also known as Red Green Blue Alpha color code is defined using Color.fromRGBO(Pass Color Int Value) function.
Example : Color.fromRGBO(0, 155, 0, 1.0) .
4. Color constants : Flutter comes with 53 inbuilt color constants. We would use Colors library with . Dot operator to define color constants.
Example : Colors.red
Contents in this project How to Use Different Color Formats Hex ARGB RGBO in Flutter Dart:
1. Import material.dart package in main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp class using void main runApp().
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with State less widget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Create Scaffold widget -> Safe Area widget -> Center widget -> Column widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children:[ ], ) ) ) ) ); } } |
5. Create 4 Text widget with 4 different color formats.
|
1 2 3 4 5 6 7 8 9 10 11 |
Text('Color Constants', style: TextStyle(fontSize : 28, color: Colors.red)), Text('Hexadecimal Color', style: TextStyle(fontSize : 28, color: Color(0xFF42A5F5))), Text('ARGB Color', style: TextStyle(fontSize : 28, color: Color.fromARGB(255, 255, 128, 0))), Text('RGBO Color', style: TextStyle(fontSize : 28, color: Color.fromRGBO(0, 155, 0, 1.0))) |
6. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children:[ Text('Color Constants', style: TextStyle(fontSize : 28, color: Colors.red)), Text('Hexadecimal Color', style: TextStyle(fontSize : 28, color: Color(0xFF42A5F5))), Text('ARGB Color', style: TextStyle(fontSize : 28, color: Color.fromARGB(255, 255, 128, 0))), Text('RGBO Color', style: TextStyle(fontSize : 28, color: Color.fromRGBO(0, 155, 0, 1.0))) ], ) ) ) ) ); } } |
Screenshot:
