How to convert Flutter color to string and back to a color

Solution 1:

In Dart the as 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; // fails, since animal2 is actually an Animal

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);

Solution 2:

You actually can't do that. Color doesn't have a constructor that accepts a String as a representation of a color.

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 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);

Solution 3:

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(),
              ),
             )