flutterdartbluetooth-lowenergyfl-chart

How to stop a line chart fluttering

I want to draw a line chart with some data in Flutter Mobile App, so used fl_chart package.

The data is notified 50 times per second (50Hz) from a BLE-connected device.

My app subscribes to the notifications and draws a line chart with notified data.

Unfortunately, the line chart flutters unstably (look for the red line chart).

Even it draws a stable chart when notifications are under 5Hz, but too slow to use.

I want my app to draws the chart with over 50Hz.

Could you tell me how to solve this fluttering?

Arduino Serial Plotter

enter image description here

Flutter

enter image description here

AspectRatio(
  aspectRatio: 1.5,
  child: Padding(
    padding: const EdgeInsets.only(bottom: 24.0),
    child: LineChart(
      LineChartData(
        minY: -50,
        maxY: 50,
        minX: iredData.first.x,
        maxX: iredData.last.x,
        lineTouchData: LineTouchData(enabled: false),
        clipData: FlClipData.all(),
        gridData: FlGridData(
          show: true,
          drawVerticalLine: false,
        ),
        borderData: FlBorderData(show: false),
        lineBarsData: [
          iredLine(iredData),
        ],
        titlesData: FlTitlesData(show: false),
      ),
    ),
  ),
)

LineChartBarData iredLine(List<FlSpot> points) {
  return LineChartBarData(
    spots: points,
    dotData: FlDotData(
      show: false,
    ),
    gradient: LinearGradient(
      colors: [widget.sinColor, widget.sinColor],
      stops: const [0.1, 1.0],
    ),
    barWidth: 4,
    isCurved: false,
  );
}
Solution

  • I solved this problem with the swapAnimationDuration: Duration.zero parameter in LineChart widget

    Refer to https://github.com/imaNNeo/fl_chart/issues/109

    AspectRatio(
  aspectRatio: 1.5,
  child: Padding(
    padding: const EdgeInsets.only(bottom: 24.0),
    child: LineChart(
      swapAnimationDuration: Duration.zero,
        minY: -50,
        maxY: 50,
        minX: iredData.first.x,
        maxX: iredData.last.x,
        lineTouchData: LineTouchData(enabled: false),
        clipData: FlClipData.all(),
        gridData: FlGridData(
          show: true,
          drawVerticalLine: false,
        ),
        borderData: FlBorderData(show: false),
        lineBarsData: [
          iredLine(iredData),
        ],
        titlesData: FlTitlesData(show: false),
      ),
    ),
  ),
)