Flutter Use HEX Color Code on Text Example

Hex color code also known as Hexadecimal color code is one of the most usable color code format in development. It is easy to use and Google itself gives us very beautiful material color palettes. To use hex color code in flutter we have to use a combination of text with color code which I have explained in this tutorial.

Flutter Use HEX Color Code on Text Example:

1. To use Hex color code we have to a Color code format.

Syntax: Color(0xff + Your Hex Color Code)

Here in the above example Color package of dart then inside it we are putting 0xff as pre define value then we have to put our Hex Color code without Hash(#). See the below example for details.

Color(0xffFF1744)

2. Defining Text widget with Hex color.

Text(
        'Demo Text Color',
        style: TextStyle(color: Color(0xffFF1744)),
      )

3. Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
          body: Center(
              child: Text(
        'Demo Text Color',
        style: TextStyle(color: Color(0xffFF1744)),
      ))),
    );
  }
}

Screenshot: