deakjahn / crop_image Goto Github PK

I'm using a WEB PROJECT.

I'm using your demo code in a view that is navigated using push() Essentially I'm in a view that has a button that opens another view on top.

After my image has been cropped, I click another button to navigate back using pop.

I use the below to initialize my CropController and to dispose of it.

Each time I do I get the assertion. I've spent hours, but can't figure out what is going on.

Is there any way the CropImage widget is performing something after I dispose of my controller? This message seems to indicate that, but I don't know, A CropController was used after being disposed.

Thank you for your assistance! Karl Shifflett

  final cropController = CropController(
    aspectRatio: 16.0 / 9.0,
    defaultCrop: const Rect.fromLTRB(0, 0, 1.0, 1.0),
  );

  @override
  void dispose() {
    super.dispose();
    cropController.dispose();
  }

════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown while finalizing the widget tree:
A CropController was used after being disposed.

Once you have called dispose() on a CropController, it can no longer be used.
When the exception was thrown, this was the stack

FULL DEBUG CONSOLE.

Launching lib\main.dart on Chrome in debug mode...
This app is linked to the debug service: ws://127.0.0.1:56415/69iyWhj5Lkc=/ws
Debug service listening on ws://127.0.0.1:56415/69iyWhj5Lkc=/ws
Running with sound null safety
Connecting to VM Service at ws://127.0.0.1:56415/69iyWhj5Lkc=/ws

════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown while finalizing the widget tree:
A CropController was used after being disposed.

Once you have called dispose() on a CropController, it can no longer be used.
When the exception was thrown, this was the stack
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 251:49 throw
packages/flutter/src/foundation/change_notifier.dart 114:9
packages/flutter/src/foundation/change_notifier.dart 119:14 [_debugAssertNotDisposed]
packages/flutter/src/foundation/change_notifier.dart 262:12 dispose
packages/trip_tracker/src/views/photo_cropper/photo_cropper_view.dart 36:20 dispose
packages/flutter/src/widgets/framework.dart 4983:11 unmount
packages/flutter/src/widgets/framework.dart 1926:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 6271:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 4807:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 6271:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 6271:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 4807:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 6271:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 6271:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 4807:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 4807:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 4807:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 6271:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 6271:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 4807:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 6271:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 4807:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 4807:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 4807:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 4807:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 4807:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 4807:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 6271:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 4807:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 4807:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 4807:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 4807:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 4807:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 6271:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 4807:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 4807:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
packages/flutter/src/widgets/framework.dart 1924:7
packages/flutter/src/widgets/framework.dart 4807:23 visitChildren
packages/flutter/src/widgets/framework.dart 1922:12 [_unmount]
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/internal/iterable.dart 39:13 forEach
packages/flutter/src/widgets/framework.dart 1935:15 [_unmountAll]
packages/flutter/src/widgets/framework.dart 2519:15 lockState
packages/flutter/src/widgets/framework.dart 2932:7 finalizeTree
packages/flutter/src/widgets/binding.dart 884:7 drawFrame
packages/flutter/src/rendering/binding.dart 363:5 [_handlePersistentFrameCallback]
packages/flutter/src/scheduler/binding.dart 1144:15 [_invokeFrameCallback]
packages/flutter/src/scheduler/binding.dart 1081:9 handleDrawFrame
packages/flutter/src/scheduler/binding.dart 995:5 [_handleDrawFrame]
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/platform_dispatcher.dart 1011:13 invoke
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/platform_dispatcher.dart 159:5 invokeOnDrawFrame
C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/initialization.dart 128:45
════════════════════════════════════════════════════════════════════════════════

Is it possible to lock the aspect ratio
so that the user does not resize the crop box?

I used the example code from here: https://pub.dev/packages/crop_image/example and changed the photo to a local jpg asset that I have.

I run the code with CanvasKit and profile mode as outlined here and here

And I have all the nice buttons, I can rotate and select aspect ratios and all, and when I click done I see the correct Rect has been calculated. However the cropped image is not displayed.

I've spent hours debugging and what I've found is that the image contains only 0s. What does that mean?

final bitmap =  controller.croppedBitmap();
final bytes = (await bitmap.toByteData())?.buffer.asUint8List();

here, the bytes are all 0 when I print them.

I haven't found a way to use this package on web on Flutter 3.7.9, has anyone else been able to get it to work?

How to programmatically set image rotation using controller?

I am using the latest version at the moment crop_image: ^1.0.11.

I'm using this code for the crop:

  final bitmap = await controller.croppedBitmap();
  await bitmap.toByteData();

Flutter doctor:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.9, on macOS 11.7.10 20G1427 darwin-x64, locale en)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[!] Xcode - develop for iOS and macOS (Xcode 13.0)
    ✗ Flutter requires Xcode 14 or higher.
      Download the latest version or update via the Mac App Store.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.83.1)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 2 categories.

In my app, I'm not supposed to crop into too small a picture, because the cropped image will then be rejected by the server I upload to.
In my particular case, we have a minimum width and a minimum height. It's even more complicated, the dimensions are ok if width >= minimumWidth OR height >= minimumHeight.

How could we implement those limits in crop_image?
Perhaps we should add a method to the controller, null by default, that checks if the dimensions are OK and recomputes the new dimensions if needed.
A method to be implemented by the app developer if needed in each specific case, for more flexibility.

cf. openfoodfacts/smooth-app#4219

Hello, I'm using the package well!

I'd like to ask you to add a function, would that be okay?

As for the current color, one grid color is applied to all external lines and internal lines, so could you add a function so that we can set the inner color separately?

Thank you.

../../../.pub-cache/hosted/pub.dev/crop_image-1.0.10/lib/src/crop_controller.dart:352:55: Error: Type 'ImageDecoderCallback' not found.
ImageStreamCompleter loadImage(UiImageProvider key, ImageDecoderCallback decode) => OneFrameImageStreamCompleter(_loadAsync(key));

Hello, I used this plugin this works well for me. When I crop the image and want to get the path of this image then get some problems.

Image image = await controller.croppedImage();
data = await image.toByteData(format: ImageByteFormat.png);

I'm passing the image which i get from controller.croppedImage(). But they said The method 'toByteData' isn't defined for the type 'Image'.. So can you please help me out with this problem?

How to programmatically set the crop area using controller?

hello,
and thank you for this cropper :)

i crop a PNG image in my Flutter web project.
i take the cropped bytes and set them to an Image widget but instead of transparent background i see a red background.
code:
ui.Image bitmap = await controller.croppedBitmap();
var data = await bitmap.toByteData(format: ui.ImageByteFormat.png);
if (data == null) {
//TODO: handle error
return;
}
Uint8List pngBytes = data.buffer.asUint8List();

setState(() {
  _croppedImage = pngBytes;
});

and then show the bytes with:
Image.memory(_croppedImage!)

i also tried to save the bytes to a file and show the file with the same result.
i attach a PNGs files for debug :)

I have used the cropper for my web application but when i open it with mobile and try to crop and image it will show a white image,
i'm using the latest version crop_image: ^1.0.11 at the moment.

i'm using this code:

final bitmap = await controller.croppedBitmap();
await bitmap.toByteData()

Flutter Doctor:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.9, on macOS 11.7.10 20G1427 darwin-x64, locale en)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[!] Xcode - develop for iOS and macOS (Xcode 13.0)
    ✗ Flutter requires Xcode 14 or higher.
      Download the latest version or update via the Mac App Store.
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.83.1)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 2 categories.

Because every version of flutter_test from sdk depends on meta 1.8.0 and crop_image >=1.0.8 depends on meta ^1.9.1, flutter_test from sdk is incompatible with crop_image >=1.0.8.

select area - rotate =>wrong image
select area - rotate - select area => right image

I am trying to use your package to output an image that is 414 x 532 pixels.

I do not want the user to be able to change the crop size area.

Is this possible with this package? If so please can you advise what settings I need to have set to do this as I am unsure what values will do this (if it is possible)

Thanks
Richard

When using Crop with a mouse on a Windows browser the Package works perfectly.

When using Crop on a device, Pixel One, WEB BROWSER, I can't resize the crop grid. Moving the crop grid is very difficult.

Is there a trick to resizing the crop grid?

Is there a trick to moving the crop grid easily?

Thank you!

Got this exception from sentry, stack trace:

crop_image.dart in _CropImageState.moveCorner at line 390 within crop_image
crop_image.dart in _CropImageState.onPanUpdate at line 325 within crop_image
monodrag.dart in DragGestureRecognizer._checkUpdate.<fn> at line 550 within flutter
recognizer.dart in GestureRecognizer.invokeCallback at line 275 within flutter
monodrag.dart in DragGestureRecognizer._checkUpdate at line 550 within flutter
monodrag.dart in DragGestureRecognizer.handleEvent at line 391 within flutter
pointer_router.dart in PointerRouter._dispatch at line 98 within flutter
pointer_router.dart in PointerRouter._dispatchEventToRoutes.<fn> at line 143 within flutter
compact_hash.dart in _LinkedHashMapMixin.forEach at line 625
pointer_router.dart in PointerRouter._dispatchEventToRoutes at line 141 within flutter
pointer_router.dart in PointerRouter.route at line 127 within flutter
binding.dart in GestureBinding.handleEvent at line 488 within flutter
binding.dart in GestureBinding.dispatchEvent at line 468 within flutter
binding.dart in RendererBinding.dispatchEvent at line 333 within flutter
binding.dart in GestureBinding._handlePointerEventImmediately at line 413 within flutter
binding.dart in GestureBinding.handlePointerEvent at line 376 within flutter
binding.dart in GestureBinding._flushPointerEventQueue at line 323 within flutter
binding.dart in GestureBinding._handlePointerDataPacket at line 292 within flutter
hooks.dart in _invoke1 at line 186
platform_dispatcher.dart in PlatformDispatcher._dispatchPointerDataPacket at line 424
hooks.dart in _dispatchPointerDataPacket at line 119

crop_image version: 1.0.11

My code:

class PhotoCropper extends StatefulWidget {
  final Image image;
  final double minimumImageSize;
  final double maximumImageSize;

  const PhotoCropper({
    super.key,
    required this.image,
    this.minimumImageSize = 280,
    this.maximumImageSize = 560,
  });
  @override
  State<StatefulWidget> createState() => PhotoCropperState();
}

class PhotoCropperState extends State<PhotoCropper> {
  final controller = CropController(
    aspectRatio: null,
    defaultCrop: const Rect.fromLTRB(0.1, 0.1, 0.9, 0.9),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Crop Image"),
      ),
      body: Center(
        child: CropImage(
          controller: controller,
          image: widget.image,
          paddingSize: 25.0,
          alwaysMove: true,
          minimumImageSize: widget.minimumImageSize,
        ),
      ),
      bottomNavigationBar: _buildButtons(),
    );
  }

  Widget _buildButtons() => Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          IconButton(
            icon: const Icon(Icons.refresh),
            onPressed: () {
              controller.rotation = CropRotation.up;
              controller.crop = const Rect.fromLTRB(0.1, 0.1, 0.9, 0.9);
              controller.aspectRatio = null;
            },
          ),
          IconButton(
            icon: const Icon(Icons.aspect_ratio),
            onPressed: _aspectRatios,
          ),
          IconButton(
            icon: const Icon(Icons.rotate_90_degrees_ccw_outlined),
            onPressed: _rotateLeft,
          ),
          IconButton(
            icon: const Icon(Icons.rotate_90_degrees_cw_outlined),
            onPressed: _rotateRight,
          ),
          TextButton(
            onPressed: _finished,
            child: const Text('Done'),
          ),
        ],
      );

  Future<void> _aspectRatios() async {
    final value = await showDialog<double>(
      context: context,
      builder: (context) {
        return SimpleDialog(
          title: const Text('Select aspect ratio'),
          children: [
            // special case: no aspect ratio
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, -1.0),
              child: const Text('free'),
            ),
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, 1.0),
              child: const Text('square'),
            ),
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, 2.0),
              child: const Text('2:1'),
            ),
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, 1 / 2),
              child: const Text('1:2'),
            ),
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, 4.0 / 3.0),
              child: const Text('4:3'),
            ),
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, 16.0 / 9.0),
              child: const Text('16:9'),
            ),
          ],
        );
      },
    );
    if (value != null) {
      controller.aspectRatio = value == -1 ? null : value;
      controller.crop = const Rect.fromLTRB(0.1, 0.1, 0.9, 0.9);
    }
  }

  Future<void> _rotateLeft() async => controller.rotateLeft();

  Future<void> _rotateRight() async => controller.rotateRight();

  Future<void> _finished() async {
    final result =
        await controller.croppedBitmap(maxSize: widget.maximumImageSize);
    if (mounted) {
      Navigator.pop(context, result);
    }
  }
}

I'm using:

child: CropImage(
    controller: controller,
    image: Image.memory(image),
    paddingSize: 25.0,
    alwaysMove: true,
    alwaysShowThirdLines: true,
)

But when change setState (() => image = NEW_IMAGE) keep old image

This image (7mb) which was selected from pick_image (gallery) on web.
Then cropped with croppedBitmap, has issues missing top left and right of image.
Smaller images in this case (1.1mb) and below didn't have any issues.

I could not repeat this with the example, any ideas on why this could be happening?
crop_image: ^1.0.6

Image of what is happening below.

[✓] Flutter (Channel stable, 3.19.3, on macOS 14.3.1 23D60 darwin-arm64, locale en-NZ)
• Flutter version 3.19.3 on channel stable
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision ba39319843 (11 days ago), 2024-03-07 15:22:21 -0600
• Engine revision 2e4ba9c6fb
• Dart version 3.3.1
• DevTools version 2.31.1

I am writing a web application with Flutter that uses this package. Part of the application is cropping images, and maintaining a very specific aspect ratio on the crop is very important for this application.

Therefore, it would be very useful to optionally lock the aspect ratio on the image crop, especially since on the web interface it is very difficult for users to maintain the desired aspect ratio manually.

I need PickedFile or File object in a method like controller.croppedImageFile() which will return a File so that I can upload it to my server. Thanks in advance.

I find that this package is great, but it's missing some basic features like:

• Building Custom corners, we can pass a callBack to build a custom corner instead of showing the default one. So it would be great if this package was headless.
• Option to hide corners, i need this when i have a loading state ( for example edget detection algorithm ). I want to hide corners, then show them when loading is finished. This also can be achieved if we have the option to build custom corners

Creating a file
If you want to get a file from the ui.Image, this is nothing specific to crop_image. Use the existing functions of Image and File:

data = await image.toByteData(format: ImageByteFormat.png);
bytes = data!.buffer.asUint8List();
file.writeAsBytes(bytes, flush);

@deakjahn @jasonttf Please Help
Thanks

E/flutter (20376): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: A CropController was used after being disposed.
E/flutter (20376): Once you have called dispose() on a CropController, it can no longer be used.
E/flutter (20376): #0      ChangeNotifier.debugAssertNotDisposed.<anonymous closure> (package:flutter/src/foundation/change_notifier.dart:157:9)
E/flutter (20376): #1      ChangeNotifier.debugAssertNotDisposed (package:flutter/src/foundation/change_notifier.dart:164:6)
E/flutter (20376): #2      ChangeNotifier.dispose (package:flutter/src/foundation/change_notifier.dart:323:27)
E/flutter (20376): #3      _ScreenAbcPostState.build.<anonymous closure> (package:abc/screens/abc/abc.post.dart:321:37)
E/flutter (20376): <asynchronous suspension>

I have never disposed but the above error occurs.

In our project we now use the crop tool for receipts.
In some cases receipts contain user data inside the cropped area, and we should not display/upload it.
With an eraser button, the user would be able to erase part of the image. While still cropping it.

I want to reset aspectRatio,
for example if i set aspectRatio to 1:1 to make selection square.
but if i want to select in free size mode then how to reset?

Would be great if we can change the cropping logic to use native cropping.
https://pub.dev/packages/native_image_cropper
We can use this for example, it might need some time to adapt the mecanisme to crop it natively, but we might achieve a huge performance optimization.
The experience right now takes quiet some time unfortunately

For some images the height of the crop utility differs from the height of the image that is supplied.

Example:

When selecting a part of the image horizontal cropping works fine but vertical cropping results in cutting off a percentage of height that is shown. So to me it looks like the vertical cropping works just fine but the height is drawn incorrectly:
Example of crop region:

Output:

Currently working on a feature for my application that will go live after Issue #10 (flutter/flutter#103803) fix lands on stable thus I am using latest master branch for development

Reproduction image https://picsum.photos/id/237/400/300

More info below

Hello
I have confusion for creating into File
In your example you have defined
file.writeAsBytes(bytes, flush);
how to does file variable come how to create the path for file
Can you please explain me
Thank you

After installing the package and if I wanted to run the package, then this error came out.

The problem is that importing the UI is not correct. You'll need to fix that, or I can give it a try on it.

Issue: UI issue - Bottom menu is hidden on IOS Chrome browser. (Screenshot attached)
Platform - Iphone Chrome Browser.

Code:

import 'dart:ui' as ui;
import 'dart:ui';

import 'package:crop_image/crop_image.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:hoka/app_resources/app_dimensions.dart';
import 'package:loader_overlay/loader_overlay.dart';

class CustomImageCropper extends StatefulWidget {
  final Uint8List imageData;
  const CustomImageCropper({
    super.key,
    required this.imageData,
  });

  @override
  State<CustomImageCropper> createState() => _CustomImageCropperState();
}

class _CustomImageCropperState extends State<CustomImageCropper> {
  final controller = CropController(
    aspectRatio: 1,
    defaultCrop: const Rect.fromLTRB(0.1, 0.1, 0.9, 0.9),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('EditPhoto'.tr),
        backgroundColor: Colors.black,
        foregroundColor: Colors.white,
        elevation: dimen0,
        leading: IconButton(
          icon: const Icon(Icons.close),
          onPressed: () {
            controller.rotation = CropRotation.up;
            controller.crop = const Rect.fromLTRB(0.1, 0.1, 0.9, 0.9);
            controller.aspectRatio = 1.0;
            Navigator.pop(context);
          },
        ),
        actions: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: dimen10),
            child: IconButton(
              tooltip: null,
              onPressed: () async {
                Get.context!.loaderOverlay.show();
                Future.delayed(
                    const Duration(
                      seconds: 1,
                    ), () async {
                  ui.Image bitmap = await controller.croppedBitmap();
                  final data = await bitmap.toByteData(format: ImageByteFormat.png);
                  Uint8List croppedImageData = data!.buffer.asUint8List();
                  // ignore: use_build_context_synchronously
                  Get.context!.loaderOverlay.hide();
                  if (mounted) return Navigator.pop(context, croppedImageData);
                });
              },
              icon: const Icon(Icons.check),
            ),
          ),
        ],
      ),
      body: Column(
        children: [
          Expanded(
            child: CropImage(
              controller: controller,
              alwaysShowThirdLines: true,
              image: Image.memory(widget.imageData),
              paddingSize: dimen25,
              alwaysMove: true,
              minimumImageSize: dimen100,
              //maximumImageSize: dimen500,
            ),
          ),
          _buildButtons()
        ],
      ),
    );
  }

  Widget _buildButtons() => Container(
    padding: const EdgeInsets.all(dimen10),
        color: Colors.black,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            IconButton(
              icon: const Icon(Icons.aspect_ratio),
              color: Colors.white,
              onPressed: _aspectRatios,
            ),
            IconButton(
              icon: const Icon(Icons.rotate_90_degrees_ccw_outlined),
              color: Colors.white,
              onPressed: _rotateLeft,
            ),
            IconButton(
              icon: const Icon(Icons.rotate_90_degrees_cw_outlined),
              color: Colors.white,
              onPressed: _rotateRight,
            ),
          ],
        ),
      );

  Future<void> _aspectRatios() async {
    final value = await showDialog<double>(
      context: context,
      builder: (context) {
        return SimpleDialog(
          title: Text('SelectAspectRatio'.tr),
          children: [
            // special case: no aspect ratio
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, -1.0),
              child: Text('Free'.tr),
            ),
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, 1.0),
              child: Text('Square'.tr),
            ),
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, 2.0),
              child: const Text('2:1'),
            ),
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, 1 / 2),
              child: const Text('1:2'),
            ),
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, 4.0 / 3.0),
              child: const Text('4:3'),
            ),
            SimpleDialogOption(
              onPressed: () => Navigator.pop(context, 16.0 / 9.0),
              child: const Text('16:9'),
            ),
          ],
        );
      },
    );
    if (value != null) {
      controller.aspectRatio = (value == -1.0) ? null : value;

      controller.crop = const Rect.fromLTRB(0.1, 0.1, 0.9, 0.9);
    }
  }

  Future<void> _rotateLeft() async => controller.rotateLeft();

  Future<void> _rotateRight() async => controller.rotateRight();
}

Flutter Doctor Summary
Doctor summary (to see all details, run flutter doctor -v):
[!] Flutter (Channel stable, 3.16.0, on macOS 14.1.1 23B81 darwin-arm64, locale en-IN)
✗ Downloaded executables cannot execute on host.
See flutter/flutter#6207 for more information.
Flutter requires the Rosetta translation environment on ARM Macs. Try running:
sudo softwareupdate --install-rosetta --agree-to-license

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[!] Xcode - develop for iOS and macOS (Xcode 15.0.1)
✗ Unable to get list of installed Simulator runtimes.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] Android Studio (version 2022.2)
[✓] Connected device (2 available)
[✓] Network resources

! Doctor found issues in 2 categories.

1.0.10.
Running Gradle task 'assembleDebug'...
../../.pub-cache/hosted/pub.dev/crop_image-1.0.10/lib/src/crop_controller.dart:352:55: Error: Type 'ImageDecoderCallback' not found.
ImageStreamCompleter loadImage(UiImageProvider key, ImageDecoderCallback decode) => OneFrameImageStreamCompleter(_loadAsync(key));
^^^^^^^^^^^^^^^^^^^^
../../.pub-cache/hosted/pub.dev/crop_image-1.0.10/lib/src/crop_controller.dart:352:55: Error: 'ImageDecoderCallback' isn't a type.
ImageStreamCompleter loadImage(UiImageProvider key, ImageDecoderCallback decode) => OneFrameImageStreamCompleter(_loadAsync(key));
^^^^^^^^^^^^^^^^^^^^

When trying to update any of the grid properties, it's not repainting.

My case was simple, put a transparent color during loading an edge detecting algorithm, then reset the crop and put colors again to my main color.

This is not working, because shouldRepaint is only comparing the old and new Crops as well as new and old isMoving property.

Will it be possible to implement zoom in the future? or the crop outside the image like in other packages?

I used this package on local, it works perfectly. But when i try on netlfy, it return transparent image.

this is my code to get image from croppedBitMap to Uint8List

ui.Image bitmapImage = await controller.croppedBitmap(
                              quality: FilterQuality.medium);
                          ByteData? byteData = await bitmapImage.toByteData(
                              format: ui.ImageByteFormat.png);

                          Uint8List pngImage = byteData!.buffer.asUint8List();

                          print("pngImage : $pngImage");

this is result of pngImage on netlify

pngImage : [137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 3, 53, 0, 0, 0, 144, 8, 6, 0, 0, 0, 49, 213, 69, 44, 0, 0, 0, 1, 115, 82, 71, 66, 0, 174, 206, 28, 233, 0, 0, 0, 4, 115, 66, 73, 84, 8, 8, 8, 8, 124, 8, 100, 136, 0, 0, 1, 225, 73, 68, 65, 84, 120, 156, 237, 193, 49, 1, 0, 0, 0, 194, 160, 245, 79, 109, 12, 31, 160, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 120, 26, 56, 57, 0, 1, 238, 1, 50, 108, 0, 0, 0, 0, 73, 69, 78, 68, 174, 66, 96, 130]

i used this build command for deploy my proj to netlify. I try html rendering and also canvaskit rendering but got nothing.
if cd flutter; then cd ..; else git clone https://github.com/flutter/flutter.git; fi && flutter/bin/flutter config --enable-web && flutter/bin/flutter build web --web-renderer canvaskit --release

flutter doctor

[✓] Flutter (Channel stable, 2.10.3, on macOS 12.2.1 21D62 darwin-x64, locale en-GB)
    • Flutter version 2.10.3 at /Users/arifwahyu/Documents/tools/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7e9793dee1 (6 weeks ago), 2022-03-02 11:23:12 -0600
    • Engine revision bd539267b4
    • Dart version 2.16.1
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/arifwahyu/Library/Android/sdk
    • Platform android-31, build-tools 30.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 100.0.4896.88

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

Thank you for nice package! It's very simple to use. I've tried to upgrade to a new flutter 3.0 version and faced with problem on web. It doesn't cause any errors but render blank image when cropped. After downgrade to flutter version 2.10 it works as before

This is a awesome package, is the only that allows to custom the UI as you want, please if you could add the zoom and rotate methods to the controller it would be perfect, great work, thanks for your dedication.