Animation Issue With ColumnSeries When Scroll Screen After setState

[sujalBandhara]

Hello,

I am facing reanimate animation issue when scrolling screen after setState in ColumnSeries chart. Is there any way to restrict the animation when user scroll the screen.

Note :: dataSource change dynamically on change of button selections.

[dharanidharandharmasivam]

Hi @sujalBandhara ,

Greetings from Syncfusion. We have analyzed your query and we couldn’t predict your exact scenario. So, kindly share with us your sample or the screenshot which replicates your scenario. This will be much helpful in further analysis and provide you the solution sooner.

Thanks,
Dharani.

[sujalBandhara]

Widget allUsageBarChart()
{

final syncfusionUsageBarChart = SfCartesianChart(

primaryXAxis: CategoryAxis(
majorGridLines: MajorGridLines(
width: 0,
color: colorThemeGreyDashedLine,
dashArray: [8, 8]),
isVisible: true,
),
// Enable legend
legend: Legend(isVisible: false),

// Enable tooltip
tooltipBehavior: TooltipBehavior(
textStyle: ChartTextStyle(
color: colorThemeWhite,
fontSize: 12,
fontWeight: FontWeight.bold),
shadowColor: Colors.transparent,
enable: true,
color: colorThemeBlack,
canShowMarker: false,
format: ' point.y\t' + getUnitForTooltip(),
shouldAlwaysShow: true,
header: ""),

series: [
ColumnSeries<UsageAllData, String>(
dataSource: _getChartCurrentData(),
xValueMapper: (UsageAllData data, _) => data.year,
yValueMapper: (UsageAllData data, _) => data.data,
// Map color for each data points from the data source
pointColorMapper: (UsageAllData data, _) =>
Helper.getColorForUsageBarChart(data.data,selectedButton))
]);

return Container(child: syncfusionUsageBarChart);

}

List _getChartCurrentData() {

if (selectedButton == 1) {
return usageData1;
}
if (selectedButton == 2) {
return usageData2;
}
if (selectedButton == 3) {
return usageData3;
} else {
return usageData4;
}

}

@OverRide
Widget build(BuildContext context) {
return new Scaffold(
body:ListView(
children: [
allUsageBarChart()
])

)
}

For above code when i changed the selectedButton and after it when scrolled the screen then graph reanimate. It's only generate after changed of selectedButton value using setState normally working fine.

[dharanidharandharmasivam]

Hi @sujalBandhara ,

Thanks for the revert. We would like to let you know when a widget is rendered in the ListView widget, then if a widget moves out of the viewport and again comes into the viewport on scrolling, the widget will be reinitialized. This is the default behavior of ListView, so the chart gets animated on scrolling. If you wish not to animate, then you can render the chart using the SingleChildScrollView widget, using this on scrolling the widget will not get reinitialized.

We have prepared a sample based on the above scenario and the sample can be found from the below link.
https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-1845822077

Thanks,
Dharani.

[EzekR]

I got the same problem, and my solution is using a flutter plugin should_rebuild. With this plugin, chart only rebuilds when the data passed to it changes. Hope this will help you.

[saravanakumar007]

Hi @sujalBandhara ,

Thanks for revert. We would like to let you know that when any widget rendered in the ListView, it will do the rebuild with reinitializing (InitState called every rebuild) its widgets when we scrolling. That’s why Chart widget also re-rendered with animate in order to overcome this issue we have prepared some workaround sample for you. In this sample, we have prevented the chart animate when scrolling.

We have prepared a sample based on the above scenario and the sample can be found from the below link.

Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/sample-1845822077-1186357010.zip

Note: We have prepared the sample just for your requirements. So based on your scenario, you can change the sample.

Regards,
Saravana Kumar K

[jkoenig134]

Hi, I am using a StaggeredGridView with Gauges and the workarounds doesn´t work for me. Is there any other Idea?

Btw, my error is

════════ Exception caught by scheduler library ═════════════════════════════════════════════════════
The following NoSuchMethodError was thrown during a scheduler callback:
The method 'findRenderObject' was called on null.
Receiver: null
Tried calling: findRenderObject()

When the exception was thrown, this was the stack: 
#0      Object.noSuchMethod (dart:core-patch/object_patch.dart:53:5)
#1      _AnnotationRendererState._calculateAnnotationPosition (package:syncfusion_flutter_gauges/src/radial_gauge/common/gauge_annotation_renderer.dart:77:42)
#2      _AnnotationRendererState.initState.<anonymous closure> (package:syncfusion_flutter_gauges/src/radial_gauge/common/gauge_annotation_renderer.dart:72:38)
#3      SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1108:15)
#4      SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1055:9)
...
════════════════════════════════════════════════════════════════════════════════════════════════════

[DeviArunaMurugan]

Hi @jkoenig134 ,

We have tried to reproduce the reported issue using the SfRadialGauge inside the StaggeredGridView widget. Unfortunately, we are unable to reproduce the issue. Could you kindly modify the below sample in order to reproduce the reported issue?

Output:

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/gauge_gridview1009360131.zip

Regards,
Devi

[jkoenig134]

Hi @DeviArunaMurugan, thanks for your reply!
My gauges are all updated by streams and there are much more gauges than in the provided image and they are completely of the screen.
Hope it helps, otherwise i will reproduce that in your example.

[jkoenig134]

@DeviArunaMurugan I tried to reproduce it in the last 30 minutes, didn´t get it. Then i switched back to my application to see the difference. And the error is gone. Seems like the app fixed itself.

[dharanidharandharmasivam]

Hi @jkoenig134 ,

Thanks for the revert. We confirm your issue has been resolved and thus we are closing this issue.

Thanks
Dharani.