I am facing an issue where my DotComponent instances are not appearing on the LineComponent in Flutter with the Flame game

Question

I am creating a resizable line, and when attempting to drag the dots on the line for resizing, the DotComponents do not appear over the line; instead, they appear below it. I have attached an image for better clarification.

What I am trying to achieve:resizable line with dots

My Result:Line and Dots not aligned properly

My code:

class LineComponent extends DraggableComponent  {

  final Path _path = Path();
  final int lineWidth = 20;
  final int lineHeight = 80;

  final Paint paint = Paint()
    ..color = Colors.white
    ..style = PaintingStyle.fill;

  late final DotComponent startPoint,endPoint,middlePoint;

  LineComponent({required position}): super(position: position) {

    priority = 10;

    startPoint = DotComponent(position: Vector2(position.x - lineHeight/2, position.y));
    endPoint   = DotComponent(position: Vector2(position.x + lineHeight/2, position.y));
    middlePoint = DotComponent(position: Vector2(position.x, position.y));

    addAll([startPoint,endPoint,middlePoint]);
  }

  @override
  bool containsLocalPoint(Vector2 point){
    return _path.contains(Offset(point.x, point.y));
  }

  @override
  void render(Canvas canvas) {

    _path.addRect(Rect.fromPoints(Offset(startPoint.position.x,startPoint.position.y-lineWidth/2),
        Offset(endPoint.position.x,endPoint.position.y+lineWidth/2)));
    _path.close();

    canvas.drawPath(_path, paint);
  }
}

class DotComponent extends DraggableComponent {

  DotComponent({required super.position} ) {
    priority = 0;
  }

  final double radius = 10.0;

  final Path _path = Path();

  final Paint paint = Paint()
    ..color = Colors.blue
    ..strokeWidth = 2
    ..style = PaintingStyle.fill;

  @override
  bool containsLocalPoint(Vector2 point){
    return _path.contains(Offset(point.x, point.y));
  }

  @override
  void onDragUpdate(DragUpdateEvent event) {
    position = event.localStartPosition;
  }

  @override
  void render(Canvas canvas) {
    _path.reset();
    _path.addOval(Rect.fromCenter(center: Offset(position.x, position.y), width: radius, height: radius));
    _path.close();

    canvas.drawPath(_path, paint);
  }
}'''

Answer 1

You have set the priority to the line to 10 and the dots to 0, a lower priority means that it will be underneath anything with a higher priority. Do note that the priorities only work between siblings. If I were you I would make the DotComponent a child of the LineComponent instead, just make sure that it then is rendered in relation to the line instead of to whatever parent that it has now.