While Cropping Image with rectangle Clip using Canvas and Save Image with PictureRecorder it save Image's actual height-width image with cropped image

Question

I want to crop the image with Rectangle and show the image in NextScreen but When I crop the image with Canvas and save the image with a picture recorder it crops the image perfectly but the cropped image takes the actual image height with the cropped image, i found this while inspecting widget

I want a solution which gives a cropped image with cropped height and width

Here is the code which cropped image and save it

final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
                              final Canvas canvas = Canvas(pictureRecorder);
                              XFile file = await _controller.takePicture();
                              Uint8List img = await File(file.path).readAsBytes();

                              ui.Codec codec = await ui.instantiateImageCodec(img);
                              ui.FrameInfo frame = await codec.getNextFrame();
                              if (context.mounted) {
                                Rect destRect = calculateRect(
                                    image: frame.image,
                                    rectHeight: ((_mData.size.width - 50) * 2) / 3.5,
                                    rectWidth: (_mData.size.width - 50),
                                    screenHeight: h,
                                    screenWidth: _mData.size.width);
                                canvas.scale((_mData.size.width - 50) / frame.image.width,
                                    (_mData.size.height - kTextTabBarHeight) /(frame.image.height));
                                canvas.clipRect(destRect,
                                    doAntiAlias: true);
                                canvas.drawImage(frame.image, Offset.zero, Paint()); 
                                final baseImg = await pictureRecorder.endRecording().toImage(
                                    (_mData.size.width-50).toInt(),
                                    (_mData.size.height).toInt());
                                ByteData? croppedBytes =
                                    await baseImg.toByteData(format: ui.ImageByteFormat.png);

Photo Screen Widget

class PhotoScreen extends StatefulWidget {
  final String path;
  final String name;
  final Uint8List bData;
  final ui.Image image;
  const PhotoScreen({
    Key? key,
    required this.path,
    required this.name,
    required this.bData,
    required this.image,
  }) : super(key: key);

  @override
  State<PhotoScreen> createState() => _PhotoScreenState();
}

class _PhotoScreenState extends State<PhotoScreen> {
  bool isShow = true;
  late MediaQueryData _mData;
  Uint8List? cData;
  Dio dio = Dio();
  String data = "Error";

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    _mData = MediaQuery.of(context);
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Image.memory(
            widget.bData,
          ),
        ],
      ),
    );
  }
}

I want a solution which gives a cropped image with cropped height and width