Implementation
Widget cropRectangleComponent(){
return Transform.translate(
offset: applyCropComponentTranslateOffset(),
child: Stack(
children: <Widget>[
Positioned(
child: Stack(
children: [
Positioned(
child: croppedVideoComponent(
SizedBox(
width: videoWidth.value,
height: videoHeight.value,
child: VideoPlayer(playerController.value),
)
)
),
Positioned(
top: currentTopCrop.value, left: currentLeftCrop.value,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.5)
),
width: draggedLeftCrop.value - currentLeftCrop.value,
height: draggedTopCrop.value - currentTopCrop.value,
)
),
Positioned(
top: draggedTopCrop.value, left: currentLeftCrop.value,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.5)
),
width: draggedLeftCrop.value - currentLeftCrop.value,
height: draggedHeightCrop.value,
)
),
Positioned(
top: draggedTopCrop.value + draggedHeightCrop.value, left: currentLeftCrop.value,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.5)
),
width: max(0, (draggedLeftCrop.value - currentLeftCrop.value)),
height: max(0, currentHeightCrop.value - (draggedTopCrop.value - currentTopCrop.value) - draggedHeightCrop.value),
)
),
Positioned(
top: currentTopCrop.value, left: draggedLeftCrop.value,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.5)
),
width: draggedWidthCrop.value,
height: draggedTopCrop.value - currentTopCrop.value,
)
),
Positioned(
top: draggedTopCrop.value + draggedHeightCrop.value, left: draggedLeftCrop.value,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.5)
),
width: max(0, draggedWidthCrop.value),
height: max(0, currentHeightCrop.value - (draggedTopCrop.value - currentTopCrop.value) - draggedHeightCrop.value),
)
),
Positioned(
top: currentTopCrop.value, left: draggedLeftCrop.value + draggedWidthCrop.value,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.5)
),
width: max(0, currentWidthCrop.value - (draggedLeftCrop.value - currentLeftCrop.value) - draggedWidthCrop.value),
height: max(0, draggedTopCrop.value - currentTopCrop.value),
)
),
Positioned(
top: draggedTopCrop.value, left: draggedLeftCrop.value + draggedWidthCrop.value,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.5)
),
width: max(0, currentWidthCrop.value - (draggedLeftCrop.value - currentLeftCrop.value) - draggedWidthCrop.value),
height: max(0, draggedHeightCrop.value)
)
),
Positioned(
top: draggedTopCrop.value + draggedHeightCrop.value, left: draggedLeftCrop.value + draggedWidthCrop.value,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.5)
),
width: max(0, currentWidthCrop.value - (draggedLeftCrop.value - currentLeftCrop.value) - draggedWidthCrop.value),
height: max(0, currentHeightCrop.value - (draggedTopCrop.value - currentTopCrop.value) - draggedHeightCrop.value),
)
),
]
),
),
Positioned(
left: draggedLeftCrop.value - (cropBallSize-linesWidth)/2,
top: draggedTopCrop.value + draggedHeightCrop.value/2 - (cropBallSize-linesHeight)/2 ,
child: GestureDetector(
onPanUpdate: (details){
draggedLeftCrop.value += details.delta.dx;
draggedWidthCrop.value -= details.delta.dx;
draggedLeftCrop.value = max(currentLeftCrop.value, min(draggedLeftCrop.value, currentWidthCrop.value - limitCroppedSize + currentLeftCrop.value));
draggedWidthCrop.value = max(limitCroppedSize, min(draggedWidthCrop.value, currentWidthCrop.value));
},
child: Container(
width: cropBallSize,
height: cropBallSize,
decoration: const BoxDecoration(
color: Colors.redAccent,
shape: BoxShape.circle
),
)
)
),
Positioned(
left: draggedLeftCrop.value + draggedWidthCrop.value/2 - (cropBallSize-linesWidth)/2,
top: draggedTopCrop.value - (cropBallSize-linesHeight)/2,
child: GestureDetector(
onPanUpdate: (details){
draggedTopCrop.value += details.delta.dy;
draggedHeightCrop.value -= details.delta.dy;
draggedTopCrop.value = max(currentTopCrop.value, min(draggedTopCrop.value, currentHeightCrop.value - limitCroppedSize + currentTopCrop.value));
draggedHeightCrop.value = max(limitCroppedSize, min(draggedHeightCrop.value, currentHeightCrop.value));
},
child: Container(
width: cropBallSize,
height: cropBallSize,
decoration: const BoxDecoration(
color: Colors.redAccent,
shape: BoxShape.circle
),
)
)
),
Positioned(
left: draggedLeftCrop.value + draggedWidthCrop.value - (cropBallSize-linesWidth)/2 - linesWidth,
top: draggedTopCrop.value + draggedHeightCrop.value/2 - (cropBallSize-linesHeight)/2 ,
child: GestureDetector(
onPanUpdate: (details) {
if(draggedWidthCrop.value + details.delta.dx + draggedLeftCrop.value <= currentWidthCrop.value + currentLeftCrop.value){
draggedWidthCrop.value += details.delta.dx;
draggedWidthCrop.value = max(limitCroppedSize, min(draggedWidthCrop.value, currentWidthCrop.value));
}
},
child: Container(
width: cropBallSize,
height: cropBallSize,
decoration: const BoxDecoration(
color: Colors.redAccent,
shape: BoxShape.circle
),
)
)
),
Positioned(
left: draggedLeftCrop.value + draggedWidthCrop.value/2 - (cropBallSize-linesWidth)/2,
top: draggedTopCrop.value + draggedHeightCrop.value - (cropBallSize-linesHeight)/2 - linesHeight,
child: GestureDetector(
onPanUpdate: (details) {
if(draggedHeightCrop.value + details.delta.dy + draggedTopCrop.value <= currentHeightCrop.value + currentTopCrop.value){
draggedHeightCrop.value += details.delta.dy;
draggedHeightCrop.value = max(draggedHeightCrop.value, limitCroppedSize);
}
},
child: Container(
width: cropBallSize,
height: cropBallSize,
decoration: const BoxDecoration(
color: Colors.redAccent,
shape: BoxShape.circle
),
)
)
),
Positioned(
child: croppedVideoComponent(
SizedBox(
width: videoWidth.value,
height: videoHeight.value,
)
)
),
],
)
);
}