Flutter onPanStart invokes late when the widget is wrapped inside InteractiveViewer - flutter

Question

I just have a simple container which has a resize handle on center right which means the container can be resized using that handle. It is wrapped inside InteractiveViewer widget.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
debugPaintSizeEnabled = true;
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
double _width = 300;
double _height = 200;
#override
Widget build(BuildContext context) {
final m = MediaQuery.of(context);
return Scaffold(
body: SafeArea(
child: Container(
height: m.size.height,
width: m.size.width,
child: InteractiveViewer(
maxScale: 30,
child: Stack(
children: <Widget>[
Container(height: _height, width: _width, color: Colors.red),
Positioned(
top: _height / 2 - 10,
left: _width - 20,
child: GestureDetector(
onPanStart: (details) {
print("PAN STARTED");
},
onPanUpdate: (details) {
final delta = details.delta;
setState(() {
_width = _width + delta.dx;
});
},
child: Container(height: 20, width: 20, color: Colors.blue),
),
)
],
),
),
),
),
);
}
}
The problem is onPanStart invokes a lot late after the initial drag. Any help would be greatly appreciated.
Note: This problem cannot be replicated in DartPad. In DartPad it works fine. The problem can only be seen in simulators/phones.

Answer 1

I found a fix for this issue. Just use Listener instead of GestureDetector (it has substitutes for the most parameters: onPanStart -> onPointerDown, onPanUpdate -> onPointerMove). With Listener, there will be no delay.
Minimum code example:
import 'package:flutter/material.dart';
class IssueExamplePage extends StatefulWidget {
#override
_IssueExamplePageState createState() => _IssueExamplePageState();
}
class _IssueExamplePageState extends State<IssueExamplePage> {
bool drawingBlocked = false;
List<Offset> points;
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
child: InteractiveViewer(
child: AbsorbPointer(
absorbing: drawingBlocked,
child: Listener(
onPointerMove: (details) {
RenderBox renderBox = context.findRenderObject();
Offset cursorLocation = renderBox.globalToLocal(details.localPosition);
setState(() {
points = List.of(points)..add(cursorLocation);
});
},
child: CustomPaint(
painter: MyPainter(points),
size: Size.infinite
),
),
),
),
),
),
floatingActionButton: Column(
children: [
FloatingActionButton(
child: Icon(Icons.clear),
onPressed: () {
setState(() {
points = [];
});
}
),
FloatingActionButton(
child: Icon(drawingBlocked? CupertinoIcons.hand_raised_fill : CupertinoIcons.hand_raised),
onPressed: () {
drawingBlocked = !drawingBlocked;
}
),
],
),
);
}
}
class MyPainter extends CustomPainter {
MyPainter(this.points);
List<Offset> points;
Paint paintBrush = Paint()
..color = Colors.blue
..strokeWidth = 5
..strokeJoin = StrokeJoin.round;
#override
void paint(Canvas canvas, Size size) {
for (int i = 0; i < points.length - 1; i++) {
canvas.drawLine(points[i], points[i + 1], paintBrush);
}
}
#override
bool shouldRepaint(MyPainter oldDelegate) {
return points != oldDelegate.points;
}
}