Skip to content

Commit

Permalink
version up to 0.4.0
Browse files Browse the repository at this point in the history
  • Loading branch information
chooyan-eng committed Mar 18, 2021
1 parent 94acad6 commit cf3ba1d
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 19 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
## [0.4.0] - 2021.03.18
* Enable to change original image via `CropController`
* Add callback when cropping area moves.
* Enable to control cropping area programmatically via `CropController`
* Fix bug that wrong cropping area is calculated when image is smaller than display.

## [0.3.0] - 2021.03.17
* Add example project in `example` directory.

Expand Down
50 changes: 32 additions & 18 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,12 @@ I will appreciate your idea or suggestions to achieve the basic idea written abo

## Usage

### Basics
Place `Crop` Widget wherever you want to place image cropping UI.

```dart
final _controller = CropController();
Widget build(BuildContext context) {
return Crop(
image: _imageData,
Expand All @@ -28,45 +31,56 @@ Widget build(BuildContext context) {
onCropped: (image) {
// do something with image data
}
controller: _controller,
);
}
```
Usage of each properties are listed below.
Then, `Crop` widget will automatically display cropping editor UI on users screen with given image.

- `image` is Image data whose type is `UInt8List`, and the result of cropping can be obtained via `onCropped` callback.
- `aspectRatio` is the aspect ratio of cropping area. Set `null` or just omit if you want to crop images with any aspect ratio.
- `aspectRatio` can be changed dynamically via setter of `CropController.aspectRatio`. (see below)
- `initialSize` is the initial size of cropping area. `1.0` (or `null`, by default) fits the size of image, which means cropping area extends as much as possible. `0.5` would be the half. This value is also referred when `aspectRatio` changes via `CropController.aspectRatio`.
- `withCircleUi` flag is to decide the shape of cropping UI. If `true`, `aspectRatio` is automatically set `1.0` and 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, call `CropController.cropCircle` instead of `CropController.crop`.
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.

```dart
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 always obtain the result of cropping images via `onCropped` callback of `Crop` Widget.

If you want to controll from your own designed Widgets, create a `CropController` instance and pass it to `controller` property of `Crop`.
### Advanced
All the properties of `Crop` and their usages are below.

```dart
final _controller = CropController();
Widget build(BuildContext context) {
return Crop(
image: _imageData,
aspectRatio: 4 / 3,
initialSize: 0.5,
withCircleUi: false,
onCropped: (image) {
// do something with image data
},
onMoved: (newRect) {
// do something with current cropping area.
}
controller: _controller,
);
}
```

You can call `_controller.crop()` to crop a image.

```dart
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 always obtain the result of cropping images via `onCropped` callback of `Crop` Widget.
- `image` is Image data whose type is `UInt8List`, and the result of cropping can be obtained via `onCropped` callback.
- `aspectRatio` is the aspect ratio of cropping area. Set `null` or just omit if you want to crop images with any aspect ratio.
- `aspectRatio` can be changed dynamically via setter of `CropController.aspectRatio`. (see below)
- `initialSize` is the initial size of cropping area. `1.0` (or `null`, by default) fits the size of image, which means cropping area extends as much as possible. `0.5` would be the half. This value is also referred when `aspectRatio` changes via `CropController.aspectRatio`.
- `withCircleUi` flag is to decide the shape of cropping UI. If `true`, `aspectRatio` is automatically set `1.0` and 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, call `CropController.cropCircle` instead of `CropController.crop`.
- `onMoved` callback is called when cropping area is moved regardless of its reasons. `newRect` of argument is current `Rect` of cropping area.

In addition, `aspectRatio` and `withCircleUi` can also be changed via `CropController`.
In addition, `image`, `aspectRatio`, `withCircleUi` and `rect` can also be changed via `CropController`.

# Contact

Expand Down
2 changes: 1 addition & 1 deletion pubspec.yaml
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
name: crop_your_image
description: crop_your_image helps your app to embed Widgets for cropping images.
version: 0.3.0
version: 0.4.0
homepage: https://github.com/chooyan-eng/crop_your_image

environment:
Expand Down

0 comments on commit cf3ba1d

Please sign in to comment.