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

· 4 min read
How to Convert Color to String and Back to a Color In Flutter
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.

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 GuideFlutter ProjectsCode 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.

Leave a Reply