Below, I have coded a simplified chart that, when run, causes a memory leak somehow. Are you aware of this issue and why it is caused? Or is there a way to solve it? In this example, I have used a stateful widget for simplicity, but in the real implementation, we use Riverpod for state management. The location gets updated when the user touches and moves on the chart, so it gets updated very frequently and thus builds the memory rapidly as well. I have also included a video of the memory view from the flutter dev tools showing the leak.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
class Chart extends StatefulWidget {
const Chart({Key? key}) : super(key: key);
@override
_ChartState createState() => _ChartState();
}
class _ChartState extends State<Chart> {
final zoomPanBehavior = ZoomPanBehavior();
final chartData = List.generate(
1440,
(index) => ChartData(
index.toDouble(),
10,
),
);
double x = 100;
double y = 100;
@override
Widget build(BuildContext context) {
final xAxis = NumericAxis(
title: AxisTitle(
alignment: ChartAlignment.center,
text: 'Time (minutes)',
),
minimum: 0,
maximum: 1440,
visibleMaximum: 60,
interval: 10,
decimalPlaces: 0,
);
final yAxis = NumericAxis(
title: AxisTitle(
alignment: ChartAlignment.center,
text: 'Concentration (mg/ml)',
),
minimum: 0,
maximum: 80,
decimalPlaces: 1,
);
final chart = SfCartesianChart(
zoomPanBehavior: zoomPanBehavior,
onChartTouchInteractionMove: (tapArgs) {
setState(() {
x = tapArgs.position.dx;
y = tapArgs.position.dy;
});
},
series: <LineSeries<ChartData, double>>[
LineSeries<ChartData, double>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.xValue,
yValueMapper: (ChartData data, _) => data.yValue,
yAxisName: "",
xAxisName: "",
),
],
primaryXAxis: xAxis,
primaryYAxis: yAxis,
annotations: <CartesianChartAnnotation>[
CartesianChartAnnotation(
widget: Container(
width: 20,
height: 20,
child: Icon(Icons.circle),
),
coordinateUnit: CoordinateUnit.logicalPixel,
region: AnnotationRegion.chart,
x: x, // x position of annotation
y: y, // y position of annotation
),
],
);
return chart;
}
}
class ChartData {
ChartData(this.xValue, this.yValue);
final double xValue;
final double yValue;
}