Flutter) How can I select shapes created with CustomPaint() - flutter

Question

I'm making a whiteboard app like the image below.
After drawing the shape, I want to move the drawn shape and line.
The rectangle and circles can be used with containers() to determine if the shape contains the points currently being touched.
But sometimes it doesn't work out. (Clicking inside the shape does not confirm that the point being touched is included)
And in the case of lines, I don't know how to make sure that the points being touched are included.(I only use two points when drawing a line, and I don't know how to check if the touched point is between these two points.)
The following is part of the code for this.
List<Rectangle>? _rects;
List<Circle>? _circles;
List<Line>? _lines;
List<ArrowLine>? _arrowLines;
int _selectedRectIndex = -1;
int _selectedCircleIndex = -1;
int _selectedLineIndex = -1;
int _selectedArrowLineIndex = -1;
// ===================
return GestureDetector(
onScaleStart: (details) {
Tool tool = context.read<DrawProvider>().tool;
RenderBox box = context.findRenderObject() as RenderBox;
Offset point = box.globalToLocal(details.focalPoint);
// pointer
switch (tool) {
case Tool.pointer:
_rects = [];
_circles = [];
_lines = [];
// save shape list
for (shape in shapes) {
if (shape is Rectangle) {
_rects!.add(shape as Rectangle);
} else if (shape is Circle) {
_circles!.add(shape as Circle);
} else if (shape is Line) {
_lines!.add(shape as Line);
}
}
// check seleted
final selectedRectIndex =
_rects!.lastIndexWhere((rect) => rect.rect!.contains(point));
final selectedCircleIndex = _circles!
.lastIndexWhere((rect) => rect.rect!.contains(point));
// TODO check line selete
// rectangle
if (selectedRectIndex != -1) {
onRectangleSelected(selectedRectIndex);
_seletedType = SeletedType.rectangle;
}
// circle
else if (selectedCircleIndex != -1) {
onCircleSelected(selectedCircleIndex);
_seletedType = SeletedType.circle;
} else {
_seletedType = SeletedType.none;
logger.d("shapeIndex: $_selectedCircleIndex");
}
break;
default:
}
}
},
onScaleUpdate: (details) {
Tool tool = context.read<DrawProvider>().tool;
RenderBox box = context.findRenderObject() as RenderBox;
Offset point = box.globalToLocal(details.focalPoint);
switch (tool) {
case Tool.pointer:
// move shapes
// rectangle
if (_seletedType == SeletedType.rectangle) {
final newLeft = point.dx;
final newTop = point.dy;
final newRight = point.dx + _seletedRectWidth!;
final newBottom = point.dy + _seletedRectHeight!;
_rects![_selectedRectIndex].rect =
Rect.fromLTRB(newLeft, newTop, newRight, newBottom);
}
// circle
else if (_seletedType == SeletedType.circle) {
final newLeft = point.dx;
final newTop = point.dy;
final newRight = point.dx + _seletedCircleWidth!;
final newBottom = point.dy + _seletedCircleHeight!;
// 이동은 되지만 이상하게 보임!
_circles![_selectedCircleIndex].rect =
Rect.fromLTRB(newLeft, newTop, newRight, newBottom);
}
// TODO line
else {
return;
}
break;
},
},
// ==============
void onRectangleSelected(int index) {
_selectedRectIndex = index;
}
void onCircleSelected(int index) {
_selectedCircleIndex = index;
}
void onLineSelected(int index) {
_selectedLineIndex = index;
}
void onArrowLineSelected(int index) {
_selectedArrowLineIndex = index;
}
shape and customPainter
class Shape {} // Origin class for all the shapes
// Rectangle
class Rectangle extends Shape {
Rect? rect;
double? left, top;
/* Because of the implementation left and top values
have to be saved inside of a Rectangle */
final paint = Paint();
Rectangle(Color color, double width) {
this.paint
..color = color
..isAntiAlias = true
..strokeCap = StrokeCap.round
..strokeWidth = width
..style = PaintingStyle.stroke; // no fill
}
}
// A straight section defined by 2 points
class Line extends Shape {
Offset? p1, p2;
final paint = Paint();
Line(Color color, double width) {
this.paint
..color = color
..isAntiAlias = true
..strokeCap = StrokeCap.round
..strokeWidth = width
..style = PaintingStyle.stroke; // no fill
}
}
class ArrowLine extends Shape {
// sketche에서 화살표 추가
Offset? p1, p2;
final paint = Paint();
ArrowLine(Color color, double width) {
this.paint
..color = color
..isAntiAlias = true
..strokeCap = StrokeCap.round
..strokeWidth = width;
}
}
class Circle extends Shape {
Rect? rect;
double? left, top;
Size? size; // test
final paint = Paint();
Circle(Color color, double width, Size size) {
this.paint
..color = color
..isAntiAlias = true
..strokeCap = StrokeCap.round
..strokeWidth = width
..style = PaintingStyle.stroke; // no fill
}
}
// ===================
class Sketcher extends CustomPainter {
final List<Shape> shapes;
Sketcher(this.shapes) : super();
#override
void paint(Canvas canvas, Size size) {
for (var shape in shapes) {
if (shape is Rectangle) {
canvas.drawRect(shape.rect!, shape.paint);
} else if (shape is Circle) {
canvas.drawOval(shape.rect!, shape.paint);
} else if (shape is Line) {
canvas.drawLine(shape.p1!, shape.p2!, shape.paint);
}
}
}
#override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
May I know why the shape is sometimes not selected and how to check if the point is between two points on the line?