[Flutter] Need Help Implementing Crop Area Coordinates for Images and Videos in Flutter Crop...

I'm currently working on a Flutter application using the crop package to enable users to crop images and videos. My goal is to capture the x, y coordinates, as well as the height and width of the crop area, not only for client-side processing but also for server-side integration.

Additionally, I want to allow users to move the image or video within the crop area seamlessly. However, I'm facing some challenges in achieving this functionality. Any guidance or code snippets to help me extract the crop area dimensions and implement smooth movement of the media would be greatly appreciated!

Thank you in advance for your assistance!

use in my project https://pub.dev/packages/crop

i want to get crop value x,y and Height,Width here is my code

import 'package:flutter/material.dart';
import 'package:crop/crop.dart';
import 'packageermission_handler/permission_handler.dart';

class CropView extends StatefulWidget {
const CropView({Key? key}) : super(key: key);
@override
State<CropView> createState() => _CropViewState();
}

class _CropViewState extends State<CropView> {
final controller = CropController(aspectRatio: 1000 / 667.0, rotation: 0);
BoxShape shape = BoxShape.rectangle;

void _cropImage() async {
final pixelRatio = MediaQuery.of(context).devicePixelRatio;
final cropped = await controller.crop(pixelRatio: pixelRatio);

if (cropped == null) {
return;
}

if (!mounted) {
return;
}
setState(() {
controller.rotation = 0;
});

final cropRect = controller.offset;
final tra = controller.transform;

final scale = controller.scale;

final imageWidth = 200;
final imageHeight = 200;

final cropX = cropRect.dx * scale;
final cropY = cropRect.dy * scale;
final cropWidth = (imageWidth / scale) * controller.aspectRatio;
final cropHeight = (imageHeight / scale);

print("Crop Area Values:");
print("X: $cropX");
print("Y: $cropY");
print("Width: $cropWidth");
print("Height: $cropHeight");
}

void _setOffset(Offset newOffset) {
setState(() {
controller.offset = newOffset;
});
}

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

@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Scaffold(
appBar: AppBar(
title: const Text('Crop Demo'),
centerTitle: true,
actions: <Widget>[
IconButton(
onPressed: _cropImage,
tooltip: 'Crop',
icon: const Icon(Icons.crop),
),
],
),
body: Column(
children: <Widget>[
Expanded(
child: Container(
color: Colors.white,
padding: const EdgeInsets.all(8),
child: Crop(
controller: controller,
shape: shape,
helper: shape == BoxShape.rectangle
? Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 2),
),
)
: null,
child: Image.network(
'https://fastly.picsum.photos/id/568/200/200.jpg?hmac=WhQYW7EIDNOKVDzKmVpIoRPPwgeIbNL8YOGoTCcCI7o',
),
onChanged: (MatrixDecomposition e) {
print("direction=" + e.translation.direction.toString());
print("distance" + e.translation.distance.toString());
print("distanceSquared" + e.translation.distanceSquared.toString());
print("dx=" + e.translation.dx.toString());
print("dy=" + e.translation.dy.toString());
print("offset=" + controller.offset.toString());

if (controller.rotation != 0) {
controller.rotation = 0;
print("Rotation set to 0");
}

print("change");
},
),
),
),
Row(
children: <Widget>[
IconButton(
icon: const Icon(Icons.undo),
tooltip: 'Undo',
onPressed: () {
controller.scale = 1;
controller.offset = Offset.zero;
},
),
PopupMenuButton<BoxShape>(
icon: const Icon(Icons.crop_free),
itemBuilder: (context) => [
const PopupMenuItem(
value: BoxShape.rectangle,
child: Text("Box"),
),
const PopupMenuItem(
value: BoxShape.circle,
child: Text("Oval"),
),
],
tooltip: 'Crop Shape',
onSelected: (x) {
setState(() {
shape = x;
});
},
),
PopupMenuButton<double>(
icon: const Icon(Icons.aspect_ratio),
itemBuilder: (context) => [
const PopupMenuItem(
value: 1000 / 667.0,
child: Text("Original"),
),
const PopupMenuDivider(),
const PopupMenuItem(
value: 16.0 / 9.0,
child: Text("16:9"),
),
const PopupMenuItem(
value: 4.0 / 3.0,
child: Text("4:3"),
),
const PopupMenuItem(
value: 1,
child: Text("1:1"),
),
const PopupMenuItem(
value: 3.0 / 4.0,
child: Text("3:4"),
),
const PopupMenuItem(
value: 9.0 / 16.0,
child: Text("9:16"),
),
],
tooltip: 'Aspect Ratio',
onSelected: (x) {
controller.aspectRatio = x;
setState(() {});
},
),
IconButton(
onPressed: () {
setState(() {
controller.offset = Offset(0, 0);
});
},
icon: const Icon(Icons.arrow_drop_up),
),
IconButton(onPressed: () {}, icon: const Icon(Icons.arrow_drop_down)),
],
),
],
),
);
}
}

Continue reading...