How to Convert Color to String and Back to a Color In Flutter??

Color and ColorSwatch constants that represent the Material design’s color palette. In today’s article, we will go through how to convert Color to String and Back to a Color in flutter.

In this tutorial, we’ll explore how to enhance the visual structure of your Flutter app by adding dividers between each line of content. Dividers serve as effective visual separators, providing clarity and improving the overall user experience. Whether you’re building a list view, chat interface, or any other layout that requires clear demarcation between lines of text or widgets, this tutorial will guide you step-by-step on implementing dividers in Flutter. Learn the techniques and best practices to add dividers between each line and achieve a polished and organized UI in your Flutter application.

How to Convert Color to String and Back to a Color In Flutter?

In Dart, as the operator doesn’t allow you to change the actual structure of an object, it just allows you to provide a hint that an object might have a more specific type.

For example, if you had a dog and an animal class you could use as to specify that your animal is actually a dog as long as the object is actually a dog.

class Animal {}
class Dog extends Animal {}

Animal animal = new Dog();
Dog bob = animal as Dog; // works, since animal is actually a dog
Animal animal2 = new Animal();
Dog bob2 = animal2 as Dog; // fa

Now, in the example, you’ve provided toString actually just creates a String representation of the current Color value. And since this object is a String, you can’t change it back to a Color with an as.

Instead, you can parse the string into a value and construct a new Color object.

Color color = new Color(0x12345678);
String colorString = color.toString(); // Color(0x12345678)
String valueString = colorString.split('(0x')[1].split(')')[0]; // kind of hacky..
int value = int.parse(valueString, radix: 16);
Color otherColor = new Color(value);

For that, you could use the Color property value. It is a 32-bit int value that represents your color.

You can save it and then use it to create your new Color object.

The code could look like this

Color pickerColor = new Color(0xff443a49);
int testingColorValue = pickerColor.value;
String testingColorString = pickerColor.toString();

Color newColor = new Color(testingColorValue);

or like this

Color pickerColor = new Color(0xff443a49);
String testingColorString = pickerColor.toString();

Color newColor = new Color(pickerColor.value);

Leveraging the power of Dart extensions we can augment String with a function that returns a Color:

extension ColorExtension on String {
  toColor() {
    var hexColor = this.replaceAll("#", "");
    if (hexColor.length == 6) {
      hexColor = "FF" + hexColor;
    }
    if (hexColor.length == 8) {
      return Color(int.parse("0x$hexColor"));
    }
  }
}

Set a string color code value in the color property.

child: Text("Text Color",
            style: TextStyle(
            color: '#55B9F4'.toColor(),
             ),
            )

Use the following code to get the hex value of the color.

Color color = Colors.red;
var hexCode = '#${color.value.toRadixString(16).substring(2, 8)}';

Conclusion:

Thanks for being with us on a Flutter Journey!!! We hope you have learned something good!!

So Today, we have walked through How to Convert Color to String and Back to a Color In Flutter.

Keep Learning !!! Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.