Implementation
Widget cropRectangleComponent(child, EditImageProvider editImageProvider){
double degrees = radiansToDegrees(editImageProvider.state.rotationAngle);
double totalWidth = 0;
double totalHeight = 0;
if(degrees % 180 == 0){
totalWidth = editImageProvider.state.width;
totalHeight = editImageProvider.state.height;
}else{
totalHeight = editImageProvider.state.width;
totalWidth = editImageProvider.state.height;
}
return Stack(
children: <Widget>[
Positioned(
child: Container(
child: child,
),
),
Positioned(
top: 0, left: 0,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.5)
),
width: draggedLeft.value,
height: draggedTop.value,
)
),
Positioned(
top: draggedTop.value, left: 0,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.5)
),
width: draggedLeft.value,
height: draggedHeight.value,
)
),
Positioned(
top: draggedTop.value + draggedHeight.value, left: 0,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.5)
),
width: max(0, (draggedLeft.value)),
height: max(0, totalHeight - (draggedTop.value) - draggedHeight.value),
)
),
Positioned(
top: 0, left: draggedLeft.value,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.5)
),
width: draggedWidth.value,
height: draggedTop.value,
)
),
Positioned(
top: draggedTop.value + draggedHeight.value, left: draggedLeft.value,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.5)
),
width: max(0, draggedWidth.value),
height: max(0, totalHeight - (draggedTop.value) - draggedHeight.value),
)
),
Positioned(
top: 0, left: draggedLeft.value + draggedWidth.value,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.5)
),
width: max(0, totalWidth - (draggedLeft.value) - draggedWidth.value),
height: max(0, draggedTop.value),
)
),
Positioned(
top: draggedTop.value, left: draggedLeft.value + draggedWidth.value,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.5)
),
width: max(0, totalWidth - (draggedLeft.value) - draggedWidth.value),
height: max(0, draggedHeight.value)
)
),
Positioned(
top: draggedTop.value + draggedHeight.value, left: draggedLeft.value + draggedWidth.value,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.5)
),
width: max(0, totalWidth - (draggedLeft.value) - draggedWidth.value),
height: max(0, totalHeight - (draggedTop.value) - draggedHeight.value),
)
),
Positioned(
left: draggedLeft.value,
top: draggedTop.value,
right: imageWidth.value - draggedWidth.value - draggedLeft.value,
bottom: imageHeight.value - draggedHeight.value - draggedTop.value,
child: Container(
width: draggedWidth.value,
height: draggedHeight.value,
)
),
Positioned(
left: draggedLeft.value - (ballSize-linesWidth)/2,
top: draggedTop.value + draggedHeight.value/2 - (ballSize-linesHeight)/2 ,
child: GestureDetector(
onPanUpdate: (details){
setState((){
draggedLeft.value += details.delta.dx;
draggedWidth.value -= details.delta.dx;
draggedLeft.value = max(0, min(draggedLeft.value, totalWidth - limitCroppedSize));
draggedWidth.value = max(limitCroppedSize, min(draggedWidth.value, totalWidth));
print(draggedLeft.value);
});
},
child: Container(
width: ballSize,
height: ballSize,
decoration: BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle
),
)
)
),
Positioned(
left: draggedLeft.value + draggedWidth.value/2 - (ballSize-linesWidth)/2,
top: draggedTop.value - (ballSize-linesHeight)/2,
child: GestureDetector(
onPanUpdate: (details){
setState((){
draggedTop.value += details.delta.dy;
draggedHeight.value -= details.delta.dy;
draggedTop.value = max(0, min(draggedTop.value, totalHeight - limitCroppedSize));
draggedHeight.value = max(limitCroppedSize, min(draggedHeight.value, totalHeight));
});
},
child: Container(
width: ballSize,
height: ballSize,
decoration: BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle
),
)
)
),
Positioned(
left: draggedLeft.value + draggedWidth.value - (ballSize-linesWidth)/2 - linesWidth,
top: draggedTop.value + draggedHeight.value/2 - (ballSize-linesHeight)/2 ,
child: GestureDetector(
onPanUpdate: (details) {
setState(() {
if(draggedWidth.value + details.delta.dx + draggedLeft.value <= totalWidth){
draggedWidth.value += details.delta.dx;
draggedWidth.value = max(limitCroppedSize, min(draggedWidth.value, totalWidth));
print(draggedLeft.value);
}
});
},
child: Container(
width: ballSize,
height: ballSize,
decoration: BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle
),
)
)
),
Positioned(
left: draggedLeft.value + draggedWidth.value/2 - (ballSize-linesWidth)/2,
top: draggedTop.value + draggedHeight.value - (ballSize-linesHeight)/2 - linesHeight,
child: GestureDetector(
onPanUpdate: (details) {
setState(() {
if(draggedHeight.value + details.delta.dy + draggedTop.value <= totalHeight){
draggedHeight.value += details.delta.dy;
draggedHeight.value = max(draggedHeight.value, limitCroppedSize);
}
});
},
child: Container(
width: ballSize,
height: ballSize,
decoration: BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle
),
)
)
),
],
);
}
