Flutter: Bars are not displaying - flutter

Question

I am trying to display the api value on bar chart,
my api data is look like this
{leaves: 3, sick: 2, annual: 0, maternity: 1}
charts.dart
i am getting this data from login screen, and passing it to the leave screen using shared perference.
i want to display it in bar chart, here is my try to do this
class LeavesCharts extends StatelessWidget {
final List<LeavesSeries> data;
LeavesCharts({#required this.data});
#override
Widget build(BuildContext context) {
List<charts.Series<LeavesSeries, String>> series=[
charts.Series(
id: "Leaves",
data: data,
domainFn: (LeavesSeries series, _)=>series.totalleave,
measureFn: (LeavesSeries series,_)=>series.annual,
colorFn: (LeavesSeries series,_)=>series.barColor,
)
];
return
Container(
height: 400,
padding: EdgeInsets.all(20),
child: Card(child: Padding(padding: const EdgeInsets.all(8.0),
child: Column(children: <Widget>[
Text("History of leaves"),
Expanded(child: charts.BarChart(series,animate: true,))
],),
)
,),);
}
}
here i am displaying the chart
String annualCount="4";
String totalleaveCount="4";
String sickCount="4";
String maternityCount="1";
class _RequestForLeaveState extends State<RequestForLeave> {
//getting values using shared perference
_userDetails() async {
SharedPreferences myPrefs = await SharedPreferences.getInstance();
setState(() {
sickCount=myPrefs.getString('sickcount');
totalleaveCount=myPrefs.getString('totalleave');
maternityCount=myPrefs.getString('maternitycount');
annualCount=myPrefs.getString('annualcount');
;
});
}
final List<LeavesSeries> data=[
LeavesSeries(
totalleave: totalleaveCount,
maternity: maternityCount,
sick:sickCount,
annual: 3,
barColor:charts.ColorUtil.fromDartColor(Colors.blue)
),
];
Widget build(BuildContext context) {
return new Scaffold(
appBar: new MyAppBar(
title: Text("Request for leave"),
// onpressed: () {
// Navigator.push(
// context, MaterialPageRoute(builder: (context) => Profile()));
// },
),
drawer: drawer(),
body: LeavesCharts(data:data)
);
}
}
class LeavesSeries {
String totalleave;
int annual;
String sick;
String maternity;
final charts.Color barColor;
LeavesSeries({#required this.totalleave,#required this.annual,#required this.sick,#required this.maternity, #required this.barColor});
}
but it is not displaying any bar, here is the output
update output:
i initialize varibles with some values and it display bar according to that, but i want 4 bars for each variable, how i can do that?
please help where i am doing wrong

Answer 1

Your data object does not contain the newly set data.
In _userDetails() the 4 variables get updated from the prefs, that should work just fine. Because the state has updated, build will be called. However, build will not use these newly set variables in the state, but instead it will access and use the 'old' data object, which contained only empty strings. It does not get overwritten with your new object.
I suggest putting the data object into the state, using the prefs you already retrieve
class _RequestForLeaveState extends State<RequestForLeave> {
LeavesCharts data;
#override
initState() {
super.initState();
data = LeavesSeries(
totalleave: 0,
maternity: 0,
sick: 0,
annual: 0,
barColor: charts.ColorUtil.fromDartColor(Colors.blue)
);
}
//getting values using shared perference
_userDetails() async {
SharedPreferences myPrefs = await SharedPreferences.getInstance();
setState(() {
data = LeavesSeries(
totalleave: myPrefs.getString('totalleave'),
maternity: myPrefs.getString('maternitycount'),
sick: myPrefs.getString('sickcount'),
annual: myPrefs.getString('annualcount'),
barColor: charts.ColorUtil.fromDartColor(Colors.blue)
)
});
}
...
}
Then in build, you can access this data object and use it as expected to retrieve all of its values.