Flutter) I want to know how to select and delete canvas shapes - flutter

Question

I am developing an online whiteboard app.
I can draw different shapes on the screen using the GestureDetector() and CustomPaint(). And now I'm want to create a function to delete the drew shapes.
The way to delete a shape that I am trying to implement is to delete it from the Shapes List when I tap it, rather than simply overwhite it with a background color.
I think it would be good if I could get a Shape data in the tapped position
Can I get a hint about this?
The following are some of the drawing codes I used
// sketcher.dart
class Sketcher extends CustomPainter {
final List<Shape> shapes;
Sketcher(this.shapes) : super();
#override
void paint(Canvas canvas, Size size) {
for (var shape in shapes) {
// shape type
if (shape is Pen) {
canvas.drawPoints(PointMode.polygon, shape.points, shape.paint);
} else if (shape is Square) {
canvas.drawRect(shape.rect!, shape.paint);
} else if (shape is Line) {
canvas.drawLine(shape.p1!, shape.p2!, shape.paint);
}
}
}
#override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
// ==================================
// shape.dart
class Shape {} // Origin class for all the shapes
// A curved line consisting of points
class Pen extends Shape {
final List<Offset> points = [];
final paint = Paint();
Pen(Color color, double width) {
// width 추가
this.paint
..color = color
..isAntiAlias = true
..strokeCap = StrokeCap.round
..strokeWidth = width;
}
void add(Offset point) => points.add(point);
}
// Square
class Square extends Shape {
Rect? rect;
double? left, top;
final paint = Paint();
Square(Color color, double width) {
this.paint
..color = color
..isAntiAlias = true
..strokeCap = StrokeCap.round
..strokeWidth = width;
}
}
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;
}
}
// ==================================
// draw screen code
extension LastElement<T> on List<T> {
T lastElement() {
return this[this.length - 1];
}
}
List<Shape> _shapes = [];
GestureDetector(
onScaleStart: (details) {
Tool tool = context.read<DrawProvider>().tool;
RenderBox box = context.findRenderObject() as RenderBox;
Offset point = box.globalToLocal(details.focalPoint);
switch (tool) {
// pen
case Tool.pen:
// get seleted tool data
double seletedPenWidth =
context.read<DrawProvider>().seletedPenWidth;
Color seletedPenColor =
context.read<DrawProvider>().seletedPenColor;
shapes.add(Pen(seletedPenColor, seletedPenWidth));
(shapes.lastElement() as Pen).add(point);
break;
// shape
case Tool.square:
double seletedShapeWidth = 5.0; // TODO
Color seletedShapeColor =
context.read<DrawProvider>().seletedShapeColor;
shapes.add(Square(seletedShapeColor, seletedShapeWidth));
double left = point.dx;
double top = point.dy;
(shapes.lastElement() as Square).left = left;
(shapes.lastElement() as Square).top = top;
break;
}
},
onScaleUpdate: (details) {
Tool tool = context.read<DrawProvider>().tool;
RenderBox box = context.findRenderObject() as RenderBox;
Offset point = box.globalToLocal(details.focalPoint);
switch (tool) {
// pen
case Tool.pen:
(shapes.lastElement() as Pen).add(point);
currentLineStreamController.add(shapes.lastElement() as Pen);
break;
// shape
case Tool.shape:
double right = point.dx;
double bottom = point.dy;
// Rect Shape
var currentSquare = shapes.lastElement() as Square;
currentSquare.rect = Rect.fromLTRB(
currentSquare.left!, currentSquare.top!, right, bottom);
currentLineStreamController.add(currentSquare);
break;
}
},
onScaleEnd: (details) {},
child: CustomPaint(
painter: Sketcher(shapes),
)
)