Image overlay, hide edges of draggable tatto image in Dart Flutter

Question

I want to create an image overlay application in flutter where there's a black container. Inside this container, I have two images: one is an arm image, which is stationary, and the other is a draggable tattoo image.

When I drag the tattoo image onto the arm image, I want the tattoo to be displayed only where it overlaps with the arm, and the parts of the tattoo image that extend beyond the edges of the arm image should be hidden. Essentially, I want to create an effect where the tattoo appears to be on the arm and only shows where the arm image is visible.

Or if it can possible like we have switch a button and on true case tattoo should draggable and can be placed on anywhere but when false dragging should stop and image should be overlaid and effect where the tattoo appears to be on the arm and only shows where the arm image is visible other part should be hide from its edges.

Image for Reference:

class _MyHomePageState extends State<MyHomePage> {
  Offset imageOffset = Offset(0.0, 0.0); // Initial offset of the image
  double imageSize = 100.0; // Adjust this size as needed

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drag Image'),
      ),
      body: Center(
        child: Container(
          height: MediaQuery.of(context).size.height * 0.45,
          width: MediaQuery.of(context).size.width * 0.80,
          child: Stack(
            children: [
              Container(
                height: MediaQuery.of(context).size.height * 0.45,
                width: MediaQuery.of(context).size.width * 0.80,
                decoration: BoxDecoration(
                  color: Colors.black, borderRadius: BorderRadius.circular(8),
                ),
              ),
              Image.asset(
                'assets/Images/arm.png',
                height: MediaQuery.of(context).size.height * .30,
                width: MediaQuery.of(context).size.width * .60,
                fit: BoxFit.contain,
              ),
              Positioned(
                left: imageOffset.dx,
                top: imageOffset.dy,
                child: GestureDetector(
                  onPanUpdate: (details) {
                    // Get the size of the parent container
                    final parentSize = Size(
                      MediaQuery.of(context).size.width * 0.80,
                      MediaQuery.of(context).size.height * 0.45,
                    );

                  setState(() {
                      // Update the image's position, ensuring it stays within the parent bounds
                      imageOffset = Offset(
                        (imageOffset.dx + details.delta.dx).clamp(
                            0.0, parentSize.width - imageSize),
                        (imageOffset.dy + details.delta.dy).clamp(
                            0.0, parentSize.height - imageSize),
                      );
                    });
                  },
                  child: Image.asset(
                    'assets/Images/Tattoo.png',
                    height: imageSize,
                    width: imageSize,
                    color: Colors.orange,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}