Hexadecimal color code also known as HEX color code is one of the most popular color strings. Hexadecimal is a 16 digit base number system. In hexadecimal color code color defines in pair format. Each pair indicates Red, Green and Blue color. So in this tutorial we would learn about How to use Hexadecimal HEX Color Code String in Flutter android iOS application to define background, text widget colors.
How to define Hex color code:
There is a fix pattern flutter gives us to define color code in Hex format. There is no need to use any type of conversation. We would use the Color class to pass the hex color in it. See the below example. We need to prefix 0xff at hex color code. Here ff means Opacity level to full. You can fine beautiful material style color code here.
Color(0xFF + Hex Color String)
or
Color(0xff + Hex Color String)
|
1 |
color: Color(0xFF42A5F5) |
Contents in this project How to use Hexadecimal HEX Color Code String in Flutter Android iOS app:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main class MyApp using runApp() function.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main class named as MyApp.
|
1 2 3 |
class MyApp extends StatelessWidget { } |
4. Create a Text widget in Column widget. We would set the Text color using Hex color code.
|
1 2 |
Text('Hexadecimal Color Code', style: TextStyle(fontSize : 28, color: Color(0xFF42A5F5))), |
5. 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 |
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('Hexadecimal Color Code', style: TextStyle(fontSize : 28, color: Color(0xFF42A5F5))), ], ) ) ) ) ); } } |
Screenshot:
