I'm currently facing a problem with scrolling in my Flutter app, and I hope someone can help me resolve this issue. I have a ListView with multiple SfCartesianCharts, and I'm encountering an issue where the scrolling doesn't work correctly when the user's finger starts on a chart or the scroll wheel event starts over the graph.
The user's finger starts on a chart or the scroll wheel event starts over the graph.
The user attempts to scroll the page.
I would like the page to scroll normally, regardless of whether the user's finger starts on a chart or the scroll wheel event is initiated over the graph. I have tried various solutions, but nothing seems to work so far.
I have zoom pan disabled. The graphs do have
class NetIncomeChart extends ConsumerStatefulWidget {
const NetIncomeChart({super.key});
@override
ConsumerState<NetIncomeChart> createState() => _NetIncomeChartState();
}
class _NetIncomeChartState extends ConsumerState<NetIncomeChart> {
List<StackedColumnSeries<IncomeStatement, String>> _getSeries(
List<IncomeStatement> data,
) {
final series = [
StackedColumnSeries<IncomeStatement, String>(
animationDuration: 0,
width: 0.95,
dataSource: data,
xValueMapper: (IncomeStatement data, _) => data.quarter,
yValueMapper: (IncomeStatement data, _) => data.netIncome,
name: 'Net Income',
pointColorMapper: (IncomeStatement data, _) {
final opacity = (data.forecasted) ? 0.5 : 1.0;
final res = data.netIncome != null
? (data.netIncome! >= 0
? Colors.greenAccent[400]
: Colors.red[400])
: null;
return res?.withOpacity(opacity);
},
),
];
return series;
}
@override
void initState() {
super.initState();
}
List<Color>? pointColors;
@override
Widget build(BuildContext context) {
final incomeStatement = ref.watch(incomeStatementNotifierProvider);
return incomeStatement.when(
data: (data) {
return ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 400),
child: SfCartesianChart(
zoomPanBehavior: ZoomPanBehavior(
enablePinching: false,
enableSelectionZooming: false,
enablePanning: false,
zoomMode: ZoomMode.x,
),
plotAreaBorderWidth: 0,
margin: const EdgeInsets.only(right: 0, left: 0, top: 0, bottom: 0),
legend: Legend(
isVisible: false,
overflowMode: LegendItemOverflowMode.wrap,
position: LegendPosition.top,
textStyle: const TextStyle(fontSize: 12),
),
primaryXAxis: CategoryAxis(
axisLabelFormatter: (axisLabelRenderArgs) => ChartAxisLabel(
axisLabelRenderArgs.text.substring(2),
const TextStyle(fontSize: 8),
),
labelPlacement: LabelPlacement.onTicks,
zoomFactor: 20 / (data.length),
zoomPosition: 1 - (20 / (data.length)),
interval: 1,
rangePadding: ChartRangePadding.normal,
minorGridLines: const MinorGridLines(width: 0),
majorGridLines: const MajorGridLines(width: 0),
labelIntersectAction: AxisLabelIntersectAction.rotate45,
multiLevelLabelStyle: const MultiLevelLabelStyle(
borderColor: Colors.grey,
borderWidth: 0.1,
borderType: MultiLevelBorderType.squareBrace,
),
multiLevelLabels: genCategoricalMultiLevelLabelForQuarters(
data.map((e) => e.quarter).toList(),
),
),
primaryYAxis: NumericAxis(
axisLine: const AxisLine(width: 0),
labelFormat: '\${value}',
numberFormat: NumberFormat.compact(),
majorTickLines: const MajorTickLines(size: 0),
anchorRangeToVisiblePoints: true,
),
series: _getSeries(data),
trackballBehavior: TrackballBehavior(
enable: true,
activationMode: ActivationMode.longPress,
tooltipDisplayMode: TrackballDisplayMode.groupAllPoints,
hideDelay: 30,
builder:
(BuildContext context, TrackballDetails trackballDetails) =>
BlurredTrackball(
colors: pointColors,
trackballDetails: trackballDetails,
xValueTransform: (x) => x.toString().toQuarterlyString(),
yValueTransform: (y) => NumberFormat.compact().format(y),
),
),
onTrackballPositionChanging: (TrackballArgs args) {
if (args.chartPointInfo.chartDataPoint?.pointColorMapper !=
null) {
pointColors = [
args.chartPointInfo.chartDataPoint!.pointColorMapper!
];
}
},
),
);
},
loading: () => const LoadingContainer(size: 400),
error: (error, stackTrace) => ErrorContainer(error: error),
);
}
}
