Scrolling animation on Flutter has bad performance: strange raster thread behavior - flutter

Question

I am developing an app using Flutter, where I simply want a rectangle to move on screen when I scroll with my fingers (on Android/iOS) or when I scroll with a mouse wheel or trackpad (on web).
This is what my code looks like:
import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
/////////////////
void main()
{
runApp(MyCustomScroller());
}
/////////////////
class MyCustomScroller extends StatefulWidget
{
#override
_MyCustomScrollerState createState() => _MyCustomScrollerState();
}
class _MyCustomScrollerState extends State<MyCustomScroller> with TickerProviderStateMixin
{
AnimationController animController;
double scrollPos = 500;
#override
void initState()
{
super.initState();
animController = AnimationController.unbounded(
vsync: this,
value: 0,
);
animController.addListener(()
{
setState(()
{
scrollPos = animController.value;
});
});
}
#override
void dispose()
{
animController.dispose();
super.dispose();
}
void _onScrollUpdate(final double velPpf)
{
final double velPps = velPpf*60;
Simulation sim = ClampingScrollSimulation(
position: scrollPos,
velocity: velPps,
friction: 0.01,
);
animController.animateWith(sim);
scrollPos += velPpf;
}
#override
Widget build(BuildContext context)
{
return MaterialApp(
title: 'Scrolling Test',
home: Listener(
onPointerMove: (PointerMoveEvent moveEvent) // mobile, web click or web finger (on mobile)
{
_onScrollUpdate(moveEvent.delta.dy);
},
onPointerSignal: (PointerSignalEvent signalEvent) // web scrolling wheel/trackpad
{
if (signalEvent is PointerScrollEvent)
_onScrollUpdate(-signalEvent.scrollDelta.dy);
},
child: Container(
color: Colors.white,
child: CustomPaint(
painter: MyPainter(
pos: scrollPos,
),
child: Container(),
)
)
)
);
}
}
/////////////////
class MyPainter extends CustomPainter
{
final double pos;
MyPainter({
#required this.pos
});
#override
void paint(Canvas canvas, Size size)
{
Paint paint = Paint()
..color = Colors.black
..strokeWidth = 12
..style = PaintingStyle.stroke;
final double x = size.width/2;
final double y = (pos % size.height*1.5) - size.height*0.25;
final Offset offset0 = Offset(x, y);
final Offset offset1 = Offset(x, y+size.height*0.25);
canvas.drawLine(offset0, offset1, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate)
{
return true;
}
}
Everything seems to work fine, I can see a rectangle that moves up and down as I scroll. When I stop scrolling, the AnimationController continues moving the rectangle. I know similar results can be achieved using a GestureDetector instead of a Listener, but a GestureDetector does not work on mouse scrolling on web.
The problem comes when I run my app in profiling mode: I turn on the Performance Overlay to see if the UI and Raster threads are executing fine and that I don't have any jank.
Most of the time the performance of the raster thread looks fine, as you can see in the following picture:
However sometimes, for some reason, the time taken to render a frame on the Raster thread goes up to around 16-17 ms, as you can see in the following image, and then stays around those values for the upcoming frames, until the animation finishes:
Anybody has any idea why this happens?