How to get Color value from a json string and use it in Flutter Dart

Question

I have a JSON assigned to a variable called user

 var user= {
'Name':'khan',
'Country':'Pakistan',
'color':'Color(0xffffff)',
};

Suppose I want to get data from it and use it somewhere.

 String encodedjson=jsonEncode(user);
    Map <String,dynamic> decodedJson=jsonDecode(encodedjson);
var colordata=decodedJson['color'];

Now I want to use colordata Let say I want to put the color in a container background

i.e

 Container(width: 200,height:200,color:colordata,)

This will give me an error because colordata is not the type Color.. So what should I do use JSON color like this.

Are you able to change what's stored in the JSON?

Christopher Moore
– Christopher Moore

2021-04-30 23:08:12 +00:00
Commented Apr 30, 2021 at 23:08 — Christopher Moore
– Christopher Moore, Commented Apr 30, 2021 at 23:08
Yes, I can dot it in my actual code.

Mehran Ullah
– Mehran Ullah

2021-04-30 23:14:27 +00:00
Commented Apr 30, 2021 at 23:14 — Mehran Ullah
– Mehran Ullah, Commented Apr 30, 2021 at 23:14

Christopher Moore · Accepted Answer · 2021-04-30 23:21:26Z

5

You can store the color as a hex literal/int, which is JSON encodable, then pass it to the Color constructor:

var user= {
'Name':'khan',
'Country':'Pakistan',
'color': 0xffffff,
};
String encodedjson=jsonEncode(user);
Map<String,dynamic> decodedJson=jsonDecode(encodedjson);
var colordata = Color(decodedJson['color']);

answered Apr 30, 2021 at 23:21

Christopher Moore

17.3k11 gold badges52 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mehran Ullah Over a year ago

Actually, the change in a JSON is occuerd using ColorPicker. void changeColor(Color color) {user['color']=color;}

Christopher Moore Over a year ago

@MehranUllah Could you rephrase what you said. It was not clear.

Mehran Ullah Over a year ago

Actually, the change in a JSON is occuerd using ColorPicker. void changeColor(Color color) {user['color']=color;}

Christopher Moore Over a year ago

@MehranUllah Then do user['color']=color.value;

Sonny Vesali · Accepted Answer · 2023-11-30 12:42:42Z

0

Just to add more clarity if you have a a color like this:

    final whiteValue = jsonDecode(jsonEncode(Color(0xFFFFFFFF).value));
    print("COLOR VAL $whiteValue"); // prints 4294967295
    final newWhite = Color(whiteValue);
    print(newWhite); // prints Color(0xffffffff)

you want to encode the value property and then interpolate that in, hopefully this adds some clarity to what the above answer was getting at.

answered Nov 30, 2023 at 12:42

Sonny Vesali

1194 silver badges12 bronze badges

Comments

Adebola Odufuwa · Accepted Answer · 2024-04-17 14:49:29Z

0

A solution would be to use the individual rgb values.

var user= {
'Name':'khan',
'Country':'Pakistan',
'color':jsonifyColor(Colors.red),
};

Map<String, int> jsonifyColor(Color color) {
    return {
      'red': color.red,
      'blue': color.blue,
      'green': color.green,
      'alpha': color.alpha,
    };
  }

Color deJsonifyColor(Map<String, int> colorMap) {
    return Color.fromARGB(
      colorMap['alpha']!,
      colorMap['red']!,
      colorMap['green']!,
      colorMap['blue']!,
    );
  }

var colordata = deJsonifyColor(user['color']);

Container(width: 200,height:200,color:colordata,)

answered Apr 17, 2024 at 14:49

Adebola Odufuwa

261 silver badge6 bronze badges

Collectives™ on Stack Overflow

How to get Color value from a json string and use it in Flutter Dart

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related