Flutter Run on Web Using https://pub.dev/packages/image_cropper/example
TypeError: dart.global.Croppie is not a constructor
../packages/image_cropper_for_web/src/croppie/croppie_dart.dart 129:50 new
../packages/image_cropper_for_web/src/croppie/croppie_dart.dart 68:12 new
../packages/image_cropper_for_web/image_cropper_for_web.dart 128:21 cropImage
../dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 runBody
../dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5 _async
../packages/image_cropper_for_web/image_cropper_for_web.dart 72:33 cropImage
InkWell(
child: Icon(Icons.crop,
size: 16,
color:
Theme.of(context)
.iconTheme
.color),
onTap: () async {
var croped =
await cropImage(
mediaFileList![
index]);
if (croped != null) {
mediaFileList![
index] =
XFile(
croped.path);
}
},
),
Future<CroppedFile?> cropImage(XFile? pickedFile) async {
if (pickedFile != null) {
final croppedFile = await ImageCropper().cropImage(
sourcePath: pickedFile.path,
compressFormat: ImageCompressFormat.png,
compressQuality: 100,
uiSettings: [
AndroidUiSettings(
toolbarTitle: 'Cropper',
toolbarColor: Colors.deepOrange,
toolbarWidgetColor: Colors.white,
initAspectRatio: CropAspectRatioPreset.square,
lockAspectRatio: false,
),
IOSUiSettings(
title: 'Cropper',
),
WebUiSettings(
context: context,
presentStyle: CropperPresentStyle.dialog,
// size: const CropperSize(
// width: 520,
// height: 520,
// ),
),
],
);
return croppedFile;
}
return null;
}
Add following codes inside tag in file web/index.html and stop and re-run again:
<head>
....
<!-- Croppie -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css" />
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
....
</head>