crop_your_image
A flutter plugin which provides Crop widget for cropping images.
Philosophy
crop_your_image provides flexible and custamizable Crop widget which can be placed at anyware in well designed apps.
As Crop is a simple widget displaying minimum cropping UI, Crop can be placed, for example, occupying entire screen, at top half of the screen, or even on dialogs or bottomsheets. It’s totally up to you!
Cropping method is also customizable. Fixing images and moving cropping area, fixing cropping area and zooming/panning images, or both are also configurable.
CropController enables apps to control cropping area outside of Crop. Any widgets or methods can configure cropping UI dynamically and perform cropping using the controller.
Build your own cropping UI!
Features
- Minimum UI restrictions
- Flexible
Cropwidget which can be placed anywhere on your widget tree CropControllerto controlCrop- Zooming / panning images
- Crop with rect or circle whichever you want
- Fix aspect ratio
- Configure the rect of cropping area programmatically
Note that this package DON’T
- read / download image data from any storages, such as gallery, internet, etc.
- resize, tilt, or other conversions which can be done with image package directly.
- provide UI parts other than cropping editor, such as “Crop” button, “Preview” button or “Change Aspect Ratio” menu. Building UI is completely UP TO YOU!
Note
crop_your_image is under developping and it’s still possible to happen broken change at any time. Any feedbacks and Pull Requests are welcome to make crop_your_image more handy and useful with less bugs.
Usage
Basics
Place Crop Widget wherever you want to place image cropping UI.
final _controller = CropController();
Widget build(BuildContext context) {
return Crop(
image: _imageData,
controller: _controller,
onCropped: (image) {
// do something with image data
}
);
}
Then, Crop widget will automatically display cropping editor UI on users screen with given image.
By creating a CropController instance and pass it to controller property of Crop, you can controll the Crop widget from your own designed Widgets.
For example, when you want to crop the image with current selected cropping area, you can just call _controller.crop() wherever you want, such like the code below.
ElevatedButton(
child: Text('Crop it!')
onPressed: _cropController.crop,
),
Because _controller.crop() only kicks the cropping process, this method returns immediately without any cropped image data. You can obtain the result of cropping images via onCropped callback of Crop Widget.
Advanced
All the properties of Crop and their usages are below.
final _controller = CropController();
Widget build(BuildContext context) {
return Crop(
image: _imageData,
controller: _controller,
onCropped: (image) {
// do something with image data
},
aspectRatio: 4 / 3,
// initialSize: 0.5,
// initialArea: Rect.fromLTWH(240, 212, 800, 600),
initialAreaBuilder: (rect) => Rect.fromLTRB(
rect.left + 24, rect.top + 32, rect.right - 24, rect.bottom - 32
),
// withCircleUi: true,
baseColor: Colors.blue.shade900,
maskColor: Colors.white.withAlpha(100),
radius: 20,
onMoved: (newRect) {
// do something with current cropping area.
},
onStatusChanged: (status) {
// do something with current CropStatus
}
cornerDotBuilder: (size, edgeAlignment) => const DotControl(color: Colors.blue),
interactive: true,
// fixArea: true,
);
}
imageis Image data whose type isUInt8List, and the result of cropping can be obtained viaonCroppedcallback.aspectRatiois the aspect ratio of cropping area. Setnullor just omit if you want to crop images with any aspect ratio.aspectRatiocan be changed dynamically via setter ofCropController.aspectRatio. (see below)initialSizeis the initial size of cropping area.1.0(ornull, by default) fits the size of image, which means cropping area extends as much as possible.0.5would be the half. This value is also referred whenaspectRatiochanges viaCropController.aspectRatio.initialAreais the initialRectof cropping area based on actual image data.initialAreaBuilderis the callback to decide initialRectof cropping area based on viewport ofCropitself.RectofCropis passed as an argument of the callback.withCircleUiflag is to decide the shape of cropping UI. Iftrue,aspectRatiois automatically set1.0and the shape of cropping UI would be circle. Note that this flag does NOT affect to the result of cropping image. If you want cropped images with circle shape, callCropController.cropCircleinstead ofCropController.crop.baseColoris the color of the mask widget which is placed over the cropping editor.maskColoris the color of the base color of the cropping editor.radiusconfigures the corner radius of cropping area.onMovedcallback is called when cropping area is moved regardless of its reasons.newRectof argument is currentRectof cropping area.onStatusChangedcallback is called when status of Crop is changed.cornerDotBuilderis the builder to build Widget placed at corners. The builder passessizewhich widget must follow andedgeAlignmentwhich indicates the position.progressIndicatoris used for showing preparing image to cropped is in progress. Nothing (SizedBox.shrink()actually) is shown by default.interactiveenables experimental feature of moving / zooming images.fixAreais the flag if crop area should be fixed.
In addition, image, aspectRatio, withCircleUi, rect and area can also be changed via CropController, and other properties, such as baseColor, maskColor and cornerDotBuilder, can be changed by setState.
Gallery App
The repository below is for a sample app of using crop_your_image.
chooyan-eng/crop_your_image_gallery
You can find several examples with executable source codes here.
Contact
If you have anything you want to inform me (@chooyan-eng), such as suggestions to enhance this package or functionalities you want etc, feel free to make issues on GitHub or send messages on Twitter @chooyan_i18n.
