Error "Tried calling: call()" while loading page with Linechart - firebase

Question

In my application I am trying to use the following code to display a Linechart with a a selector below for the displayed data.
class _SearchResultState extends State<SearchResult> {
dynamic data_snap;
bool _loading = false;
Future<dynamic> getData() async{
final DocumentReference document = FirebaseFirestore.instance.collection("Animals").doc(widget.data);
_loading = true;
await document.get().then<dynamic>(( DocumentSnapshot snapshot) async{
setState(() {
data_snap =snapshot.data;
_loading = false;
});
});
}
Map<int, LineChartData> selection;
int _selected = 2;
bool showAvg = false;
#override
void initState(){
selection = {0: oneWeek(), 1: oneMonth(), 2: oneYear()};
super.initState();
getData();
}
#override
Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
SizeConfig().init(context);
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
iconTheme: IconThemeData(color: Colors.lightGreen),
backgroundColor: Colors.grey[100],
title: const Text('Details', style:
TextStyle(color: Colors.lightGreen)),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [ _loading ? CircularProgressIndicator():
Container(
height: SizeConfig.safeBlockHorizontal * 150,
child: Card(
color: Theme.of(context).cardColor,
child: Padding(
padding: const EdgeInsets.only(
top: 5.0,
bottom: 5.0,
left: 5.0,
right: 5.0
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
children: _loading ? CircularProgressIndicator(): [
Text(data_snap()['Name'],
style: new TextStyle(
fontSize: SizeConfig.blockSizeHorizontal * 5,
fontWeight: FontWeight.bold))
],
),
Row(
children: [ _loading ? CircularProgressIndicator():
new Container(
width: SizeConfig.safeBlockHorizontal * 90,
height: SizeConfig.safeBlockHorizontal * 38,
alignment: Alignment.center,
child: LineChart(
selection[_selected],
),
),],),
Row(
children: [ _loading ? CircularProgressIndicator():
new Container(
width: SizeConfig.safeBlockHorizontal * 90,
height: SizeConfig.safeBlockHorizontal * 38,
alignment: Alignment.center,
child:
SizedBox(
width: 300,
height: 34,
child: Row(
children: [
FlatButton(
onPressed: () {
setState(() {
_selected = 2;
});
},
child: Text('Week',
style: TextStyle(
fontSize: 12,
color: _selected == 0
? Colors.white.withOpacity(0.5)
: Colors.white))),
FlatButton(
onPressed: () {
setState(() {
_selected = 1;
});
},
child: Text('Month',
style: TextStyle(
fontSize: 12,
color: _selected == 1
? Colors.white.withOpacity(0.5)
: Colors.white))),
FlatButton(
onPressed: () {
setState(() {
_selected = 2;
});
},
child: Text('Year',
style: TextStyle(
fontSize: 12,
color: _selected == 2
? Colors.white.withOpacity(0.5)
: Colors.white))),
],
))
)],),
],
),
),
),
)
]
)
),
);
}
LineChartData oneWeek() {
List<double> listMax2 = List.from(data_snap()['Historie_Inhalt']);
final listMax2reversed = List.from(listMax2.reversed);
final list_one_week2 = listMax2reversed.take(
data_snap()['Historie_Zeitangabe']['1w']);
final list_one_week_list2 = List.from(list_one_week2);
final list_one_week_list_rev2 = List.from(list_one_week_list2.reversed);
List<FlSpot> spots_one_week2 =
list_one_week_list_rev2
.asMap()
.entries
.map((e) {
return FlSpot(e.key.toDouble(), e.value);
}).toList();
return LineChartData(
lineTouchData: LineTouchData(enabled: true),
gridData: FlGridData(
show: false,
drawHorizontalLine: false,
drawVerticalLine: false,
getDrawingVerticalLine: (value) {
return FlLine(
color: Colors.black,
strokeWidth: 1,
);
},
getDrawingHorizontalLine: (value) {
return FlLine(
color: const Color(0xff37434d),
strokeWidth: 1,
);
},
),
lineBarsData: [
LineChartBarData(
spots: spots_one_week2,
isCurved: true,
barWidth: 1,
colors: [
Colors.black87,
],
belowBarData: BarAreaData(
show: true
),
aboveBarData: BarAreaData(
show: true,
colors: [Colors.grey.withOpacity(0.3)]
),
dotData: FlDotData(
show: false,
getDotPainter: (spot, percent, barData, index) =>
FlDotCirclePainter(
radius: 10,
color: Colors.deepOrange.withOpacity(0.5)),
),
),
],
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: false,
reservedSize: 3,
getTitles: (value) {
switch (value.toInt()) {
case 0:
return '2019';
case 1:
return '2020';
case 2:
return '2021';
case 3:
return '2022';
default:
return '';
}
}),
leftTitles: SideTitles(showTitles: true, margin: 3,
reservedSize: SizeConfig.safeBlockHorizontal * 11
),
rightTitles: SideTitles(showTitles: false),
topTitles: SideTitles(showTitles: false),
));
}
LineChartData oneMonth() {
List<double> listMax2 = List.from(data_snap()['Historie_Inhalt']);
final listMax2reversed = List.from(listMax2.reversed);
final list_one_month2 = listMax2reversed.take(data_snap()['Historie_Zeitangabe']['1m']);
final list_one_month_list2 = List.from(list_one_month2);
final list_one_month_list_rev2 = List.from(list_one_month_list2.reversed);
List<FlSpot> spots_one_month2 =
list_one_month_list_rev2
.asMap()
.entries
.map((e) {
return FlSpot(e.key.toDouble(), e.value);
}).toList();
return LineChartData(
lineTouchData: LineTouchData(enabled: true),
gridData: FlGridData(
show: false,
drawHorizontalLine: false,
drawVerticalLine: false,
getDrawingVerticalLine: (value) {
return FlLine(
color: Colors.black,
strokeWidth: 1,
);
},
getDrawingHorizontalLine: (value) {
return FlLine(
color: const Color(0xff37434d),
strokeWidth: 1,
);
},
),
lineBarsData: [
LineChartBarData(
spots: spots_one_month2,
isCurved: true,
barWidth: 1,
colors: [
Colors.black87,
],
belowBarData: BarAreaData(
show: true
),
aboveBarData: BarAreaData(
show: true,
colors: [Colors.grey.withOpacity(0.3)]
),
dotData: FlDotData(
show: false,
getDotPainter: (spot, percent, barData, index) =>
FlDotCirclePainter(
radius: 10,
color: Colors.deepOrange.withOpacity(0.5)),
),
),
],
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: false,
reservedSize: 3,
getTitles: (value) {
switch (value.toInt()) {
case 0:
return '2019';
case 1:
return '2020';
case 2:
return '2021';
case 3:
return '2022';
default:
return '';
}
}),
leftTitles: SideTitles(showTitles: true, margin: 3,
reservedSize: SizeConfig.safeBlockHorizontal * 11
),
rightTitles: SideTitles(showTitles: false),
topTitles: SideTitles(showTitles: false),
));
}
LineChartData oneYear() {
List<double> listMax2 = List.from(data_snap()['Historie_Inhalt']);
final listMax2reversed = List.from(listMax2.reversed);
final list_one_year2 = listMax2reversed.take(data_snap()['Historie_Zeitangabe']['1y']);
final list_one_year_list2 = List.from(list_one_year2);
final list_one_year_list_rev2 = List.from(list_one_year_list2.reversed);
List<FlSpot> spots_one_year2 =
list_one_year_list_rev2
.asMap()
.entries
.map((e) {
return FlSpot(e.key.toDouble(), e.value);
}).toList();
return LineChartData(
lineTouchData: LineTouchData(enabled: true),
gridData: FlGridData(
show: false,
drawHorizontalLine: false,
drawVerticalLine: false,
getDrawingVerticalLine: (value) {
return FlLine(
color: Colors.black,
strokeWidth: 1,
);
},
getDrawingHorizontalLine: (value) {
return FlLine(
color: const Color(0xff37434d),
strokeWidth: 1,
);
},
),
lineBarsData: [
LineChartBarData(
spots: spots_one_year2,
isCurved: true,
barWidth: 1,
colors: [
Colors.black87,
],
belowBarData: BarAreaData(
show: true
),
aboveBarData: BarAreaData(
show: true,
colors: [Colors.grey.withOpacity(0.3)]
),
dotData: FlDotData(
show: false,
getDotPainter: (spot, percent, barData, index) =>
FlDotCirclePainter(
radius: 10,
color: Colors.deepOrange.withOpacity(0.5)),
),
),
],
titlesData: FlTitlesData(
bottomTitles: SideTitles(
showTitles: false,
reservedSize: 3,
getTitles: (value) {
switch (value.toInt()) {
case 0:
return '2019';
case 1:
return '2020';
case 2:
return '2021';
case 3:
return '2022';
default:
return '';
}
}),
leftTitles: SideTitles(showTitles: true, margin: 3,
reservedSize: SizeConfig.safeBlockHorizontal * 11
),
rightTitles: SideTitles(showTitles: false),
topTitles: SideTitles(showTitles: false),
));
}
}
I already tried to use a FutureBuilder, but it doesn't work with the selection in initState().
I get the following error in the line "List listMax2 = List.from(data_snap()['Historie_Inhalt']);" of the function LineChartData oneWeek().
The method 'call' was called on null.
Receiver: null
Tried calling: call()
How can I solve this problem?

Answer 1

Try doing this instead:
Map<int, LineChartData> selection = {};
#override
void initState(){
super.initState();
getData().then((_) { //or use whenComplete
setState(() => selection = {0: oneWeek(), 1:oneMonth(), 2: oneYear()});
}
}
And change your Row like this:
Row(
children: [
_loading
? CircularProgressIndicator()
: Container(
width: SizeConfig.safeBlockHorizontal * 90,
height: SizeConfig.safeBlockHorizontal * 38,
alignment: Alignment.center,
child: selection.isNotEmpty && selection.containsKey(_selected)
? LineChart(selection[_selected])
: Container() ,
),],),