How can I add legend in syncfusion charts on 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];
  }
}