Flutter display Object entries - flutter

Question

So I'm new to flutter and I simply want to display an Object that I receive from a server.
The Object looks something like this. So normally i would do something like Global.mEnergy.value
{
"Global":{
"mEnergy":{
"value":"-0",
"name":"WZ Wärmemenge",
"id":730,
"unit":"kWh",
"type":"value"
},
"mPower":{
"value":"-0.0",
"name":"WZ Leistung",
"id":732,
"unit":"kW",
"type":"value"
},
"xRelease":{
"value":"34",
"name":"Releaseinfo",
"id":727,
"unit":"",
"type":"value"
},
"xVersion":{
"value":"12.00",
"name":"Version Software",
"id":711,
"unit":"",
"type":"value"
},
"name":"Test"
},
"HW1":{
"rState_HW1":{
"value":"10",
"name":"State",
"id":222,
"unit":"",
"type":"value"
},
"pSetTemp_HW1":{
...
},
"rTopTemp_HW1":{
...
},
"pMinTemp_HW1":{
...
},
"pHWChrgTime1Begin_HW1":{
...
}
}
}
But I have really no idea how to start. I know i have to create a class like that
class Device {
final Object hw1;
final Object hw2;
final Object circuit1;
final Object circuit2;
final Object circuit3;
final Object circuit4;
final Object global;
const Device(
{required this.hw1,
required this.hw2,
required this.circuit1,
required this.circuit2,
required this.circuit3,
required this.circuit4,
required this.global});
factory Device.fromJson(Map<String, dynamic> json) {
return Device(
hw1: json['HW1'] as Object,
hw2: json['HW2'] as Object,
circuit1: json['1'] as Object,
circuit2: json['2'] as Object,
circuit3: json['3'] as Object,
circuit4: json['4'] as Object,
global: json['Global'] as Object,
);
}
}
Is there no easy way how I can access the object like this?
Text(snapshot.data!.global.mEnergy.value)

Answer 1

Most often, my strategy is to create classes that mimic the data structure for an API. That gives me the type-safe approach to getting and manipulating the data I need to.
Taking your data set, I have come up with some classes. The first is CommonProperties. Objects such as "mEnergy" in "global" and "rState_HW1" in "HW1" are composed of these properties.
class CommonProperties {
double? value;
String? name;
int? id;
String? unit;
String? type;
CommonProperties({
this.value,
this.name,
this.id,
this.unit,
this.type
});
factory CommonProperties.fromJson(dynamic data) {
data = data ?? {};
return CommonProperties(
value: data["value"],
name: data["name"],
id: data["id"],
unit: data["unit"],
type: data["type"]
);
}
Map<String, dynamic> toJson() {
return {
"value": value,
"name": name,
"id": id,
"unit": unit,
"type": type
};
}
}
Now you have the 2 upper-tier objects called "Global" and "HW1". These are composed of CommonProperties objects.
class Global {
CommonProperties? mEnergy;
CommonProperties? mPower;
CommonProperties? xRelease;
CommonProperties? xVersion;
String? name;
Global({
this.mEnergy,
this.mPower,
this.xRelease,
this.xVersion,
this.name
});
factory Global.fromJson(dynamic data) {
data = data ?? {};
return Global(
mEnergy: CommonProperties.fromJson(data["mEnergy"]),
mPower: CommonProperties.fromJson(data["mPower"]),
xRelease: CommonProperties.fromJson(data["xRelease"]),
xVersion: CommonProperties.fromJson(data["xVersion"]),
name: data["name"]
);
}
Map<String, dynamic> toJson() {
return {
"mEnergy": mEnergy!.toJson(),
"mPower": mPower!.toJson(),
"xRelease": xRelease!.toJson(),
"xVersion": xVersion!.toJson(),
"name": name
};
}
}
class HW1 {
CommonProperties? rState_HW1;
CommonProperties? pSetTemp_HW1;
CommonProperties? pTopTemp_HW1;
CommonProperties? rTopTemp_HW1;
CommonProperties? pMinTemp_HW1;
CommonProperties? pHWChrgTime1Begin_HW1;
HW1({
this.rState_HW1,
this.pSetTemp_HW1,
this.pTopTemp_HW1,
this.rTopTemp_HW1,
this.pMinTemp_HW1,
this.pHWChrgTime1Begin_HW1,
});
factory HW1.fromJson(dynamic data) {
data = data ?? {};
return HW1(
rState_HW1: CommonProperties.fromJson(data["rState_HW1"]),
pSetTemp_HW1: CommonProperties.fromJson(data["pSetTemp_HW1"]),
pTopTemp_HW1: CommonProperties.fromJson(data["pTopTemp_HW1"]),
rTopTemp_HW1: CommonProperties.fromJson(data["rTopTemp_HW1"]),
pMinTemp_HW1: CommonProperties.fromJson(data["pMinTemp_HW1"]),
pHWChrgTime1Begin_HW1: CommonProperties.fromJson(data["pHWChrgTime1Begin_HW1"]),
);
}
Map<String, dynamic> toJson() {
return {
"rState_HW1": rState_HW1!.toJson(),
"pSetTemp_HW1": pSetTemp_HW1!.toJson(),
"pTopTemp_HW1": pTopTemp_HW1!.toJson(),
"rTopTemp_HW1": rTopTemp_HW1!.toJson(),
"pMinTemp_HW1": pMinTemp_HW1!.toJson(),
"pHWChrgTime1Begin_HW1": pHWChrgTime1Begin_HW1!.toJson(),
};
}
}
Finally, I put it all together to build a class that represents the entire DataSet.
class DataSet {
Global? global;
HW1? hw1;
DataSet({
this.global,
this.hw1
});
factory DataSet.fromJson(dynamic data) {
data = data ?? {};
return DataSet(
global: Global.fromJson(data["global"]),
hw1: HW1.fromJson(data["HW1"])
);
}
Map<String, dynamic> toJson() {
return {
"global": global!.toJson(),
"hw1": hw1!.toJson(),
};
}
}
Notice that each class has a constructor for fromJson(data) and a method for toJson(). This is helpful to easily go to and from JSON data for interacting with APIs and such.
Now that I have everthing put together, I can pass the parsed JSON object from an API call into the DataSet.fromJson(data) constructor and I will have a type-safe object to work with all the data within that data set.
var parsedData = json.decode(httpResponse.body);
DataSet dataSet = DataSet.fromJson(parsedData);
print(dataSet.global.mEnergy.value);
print(dataSet.hw1.rState_HW1.value);