How can I add legend in syncfusion charts on Flutter - flutter

Question

I am trying to add legend to SfCartesianChart. I am getting "Null check operator used on a null value" error. You can see the code below.
class AllInLineChart extends StatefulWidget {
#override
State<AllInLineChart> createState() => _AllInLineChartState();
final Data chartData;
const AllInLineChart(this.chartData);
}
class _AllInLineChartState extends State<AllInLineChart> {
#override
Widget build(BuildContext context) {
final Data _chart = widget.chartData;
return Container(
margin: margin10,
decoration: boxDecoration,
child: SfCartesianChart(
legend: Legend(isVisible: true),
primaryXAxis: DateTimeAxis(),
primaryYAxis: NumericAxis(),
series: <ChartSeries>[
SplineSeries<dataItem, DateTime>(
name: 'Crypto',
dataSource: _chart.cryptoItems,
xValueMapper: (dataItem data, _) => data.time,
yValueMapper: (dataItem data, _) => data.totalAmountInTime,
markerSettings: MarkerSettings(isVisible: true),
),
SplineSeries<dataItem, DateTime>(
name: 'Stock',
dataSource: _chart.stockItems,
xValueMapper: (dataItem data, _) => data.time,
yValueMapper: (dataItem data, _) => data.totalAmountInTime,
markerSettings: MarkerSettings(isVisible: true),
),
SplineSeries<dataItem, DateTime>(
dataSource: _chart.etfItems,
xValueMapper: (dataItem data, _) => data.time,
yValueMapper: (dataItem data, _) => data.totalAmountInTime,
name: 'ETF',
markerSettings: MarkerSettings(isVisible: true),
),
SplineSeries<dataItem, DateTime>(
dataSource: _chart.currencyItems,
xValueMapper: (dataItem data, _) => data.time,
yValueMapper: (dataItem data, _) => data.totalAmountInTime,
name: 'Currency',
markerSettings: MarkerSettings(isVisible: true),
),
SplineSeries<dataItem, DateTime>(
dataSource: _chart.cashItems,
xValueMapper: (dataItem data, _) => data.time,
yValueMapper: (dataItem data, _) => data.totalAmountInTime,
name: 'Cash',
markerSettings: MarkerSettings(isVisible: true),
),
],
),
);
}
}
You can see error here
If I remove legend: Legend(isVisible: true), from code, it is working without error. But I need legend. Thanks for your help.
You can see working version here
My sample data is:
class dataItem {
final DateTime time;
final double totalAmountInTime;
dataItem(this.time, this.totalAmountInTime);
}
class Data with ChangeNotifier {
final List<dataItem> _cryptoItems = [
dataItem(DateTime.parse("20220820"), 10000),
dataItem(DateTime.parse("20220821"), 5000),
dataItem(DateTime.parse("20220822"), 50000),
dataItem(DateTime.parse("20220823"), 25000),
dataItem(DateTime.parse("20220824"), 100000),
];
List<dataItem> get cryptoItems {
return [..._cryptoItems];
}
final List<dataItem> _stockItems = [
dataItem(DateTime.parse("20220820"), 1000),
dataItem(DateTime.parse("20220821"), 500),
dataItem(DateTime.parse("20220822"), 5000),
dataItem(DateTime.parse("20220823"), 2500),
dataItem(DateTime.parse("20220824"), 10000),
];
List<dataItem> get stockItems {
return [..._stockItems];
}
final List<dataItem> _etfItems = [
dataItem(DateTime.parse("20220820"), 500),
dataItem(DateTime.parse("20220821"), 1000),
dataItem(DateTime.parse("20220822"), 2500),
dataItem(DateTime.parse("20220823"), 5000),
dataItem(DateTime.parse("20220824"), 0),
];
List<dataItem> get etfItems {
return [..._etfItems];
}
final List<dataItem> _currencyItems = [
dataItem(DateTime.parse("20220820"), 5000),
dataItem(DateTime.parse("20220821"), 10000),
dataItem(DateTime.parse("20220822"), 25000),
dataItem(DateTime.parse("20220823"), 50000),
dataItem(DateTime.parse("20220824"), 100000),
];
List<dataItem> get currencyItems {
return [..._currencyItems];
}
final List<dataItem> _cashItems = [
dataItem(DateTime.parse("20220820"), 10000),
dataItem(DateTime.parse("20220821"), 50000),
dataItem(DateTime.parse("20220822"), 25000),
dataItem(DateTime.parse("20220823"), 5000),
dataItem(DateTime.parse("20220824"), 1000),
];
List<dataItem> get cashItems {
return [..._cashItems];
}
}