How to use Hexadecimal HEX Color Code String in Flutter Dart ?

Hello Guys. Use Hexadecimal HEX Color Code String in Flutter Dart is very easy in Flutter. A color hex code is a hexadecimal way to represent a color in RGB format by combining three values – the amounts of red, green, and blue in a particular shade of color.

These color hex codes have been an integral part of HTML, web design, app development, and remain a key way of representing color formats digitally. So let’s start this tutorial without wasting your time.

You can Use HEX Color code in Flutter by using Color class in flutter. as like below example.

Color(0xFF + Hex Color String)

OR

Color(0xff + Hex Color String)

Table of Contents

How to use Hexadecimal HEX Color Code String in Flutter Dart ?

How to use Hexadecimal HEX Color Code String in Flutter Dart ?
to use Hexadecimal HEX Color Code String in Flutter Dart You can Use HEX Color code in Flutterby using Color class in a flutter. as like the below example. Here Is Not Conversation needed. we just have to use the Color class of flutter to pass the hex color in it. Just Follow All Below Step. We need to prefix 0xff at hex color code.
use Hexadecimal HEX Color Code String in Flutter
to use Hexadecimal HEX Color Code String in Flutter Dart You can Use HEX Color code in Flutterby using Color class in a flutter. as like the below example. Here Is Not Conversation needed. we just have to use the Color class of flutter to pass the hex color in it. Just Follow All Below Step. We need to prefix 0xff at hex color code.

Time needed: 3 hours.

Here Is Not Conversation needed. we just have to use Color class of flutter to pass the hex color in it. Just Follow All Below Step. We need to prefix 0xff at hex color code.

Import material.dart package in your app’s main.dart
First of all, we need to import material.dart in our main.dart OR whatever file where you want to use hex color code. Like this.
import ‘package:flutter/material.dart’;
Call MyApp in runApp function.
Then just call our main calss MyApp using runApp() Function. Just like below.
void main() => runApp(MyApp());
Creating main class named MyApp.
Now, we have to make our main class named as MyApp same like below.
class MyApp extends StatelessWidget{

}
Then we need to use hex color to our Text widget.
First Of all, creates a Text widget in the Center widget. we want to set the Text color using Hex color code. As Same like Below.
Text(“FlutterCorner.com”, style: TextStyle(fontSize:20, color: Color(0xffFF42A5F5),),),
Boom!
We Did It. Here is I am Providing my Full Source code for your batter understanding.

Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:
            Text('HEX Color Code String in Flutter Dart - Fluttercorner.com'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: Text(
          'FlutterCorner.com',
          style: TextStyle(
            fontSize: 28,
            color: Color(0xFF42A5F5),
          ),
        ),
      ),
    );
  }
}

Screenshot:

Summery

So, It’s All About How to use Hexadecimal HEX Color Code String in Flutter Dart? I hope this tutorial helps you to solve your error. Please Comment Below if You stucks anywhere with my code.

Also Check Out Below Tutorials

Posted

May 8, 2021

in

Flutter, Flutter Tutorial

by

Milan Dhameliya

Tags:

HEX Color Code String in Flutter

Comments

Leave a Reply Cancel reply