how to add icon to chart in flutter

user_13109018 0
Viewed 199

I want to create a crash game like this video:

gif

So I use syncfusion_flutter_charts to add charts to my app as this way:

SfCartesianChart(
      primaryXAxis: NumericAxis(),
      primaryYAxis: NumericAxis(),
      title: ChartTitle(text: chartData.length.toString()),
      legend: Legend(isVisible: false),
      series: <LineSeries<ChartSampleData, num>>[
        LineSeries<ChartSampleData, num>(
            dataSource: controller.chartData,
            xValueMapper: (ChartSampleData data, _) =>
            data.x / 100,
            yValueMapper: (ChartSampleData data, _) =>
            data.y / 100,
            dataLabelSettings:
            DataLabelSettings(isVisible: true)),
      ],
    )

And use this code to generate data:

while (isStop == false) {
  await Future.delayed(const Duration(seconds: 1));
  this.x.value = this.x.value + 1;
  y.value = x.value * x.value;
  chartData.add(ChartSampleData(x: this.x.value, y: this.y.value));
}

My output of codes is this:

output gif

My question is how to add that spaceship to the end of the chart? Or can you have a better way to create that crash chart?

flutter
1 Answers

If your question is about positionning:

To add the spaceship, you can add your chart in a Stack widget, and add the spaceship as the second child of your Stack. You can eventually use the Positioned or Align widget too.

If your question is about creating the animation:

You'll have to create the animation either directly with Flutter animations or with Rive or Lottie. Both of them have dependencies that you can integrate on your project (you can find them on pub.dev) and you can create the animation directly on their website or through Adobe After Effect plug-ins.

user_115500650
Related