How to Create Custom Image Editing Experiences in FlutterFlow

Go to Custom Code → Pubspec Dependencies and add image_cropper with version ^5.0.0. This package opens a native crop/rotate UI on both iOS and Android — users get platform-standard editing tools with no custom UI required. It handles crop aspect ratio presets, rotation, and zoom. The edited image returns as a CroppedFile with the file path.

Create a Custom Action called cropImage that receives the image file path (String) and returns the cropped file path (String). In the code, call ImageCropper().cropImage() with source path, set uiSettings for Android (toolbarTitle, toolbarColor, initAspectRatio: CropAspectRatioPreset.original) and iOS (aspectRatioLockEnabled: false). Return the croppedFile?.path or null if cancelled.

1import 'package:image_cropper/image_cropper.dart';
2
3Future<String?> cropImage(String imagePath) async {
4  final croppedFile = await ImageCropper().cropImage(
5    sourcePath: imagePath,
6    uiSettings: [
7      AndroidUiSettings(
8        toolbarTitle: 'Edit Image',
9        toolbarColor: Colors.blue,
10        toolbarWidgetColor: Colors.white,
11        initAspectRatio: CropAspectRatioPreset.original,
12        lockAspectRatio: false,
13      ),
14      IOSUiSettings(
15        title: 'Edit Image',
16        aspectRatioLockEnabled: false,
17      ),
18    ],
19  );
20  return croppedFile?.path;
21}

For a complete editing experience, add pro_image_editor to Pubspec Dependencies. Create a Custom Widget called FullImageEditor. Initialize ProImageEditor.memory(imageBytes) or ProImageEditor.network(imageUrl). This provides crop, rotate, filter presets, brightness/contrast/saturation sliders, text overlay, drawing, and stickers. On save, call the editor's exportImage callback which returns Uint8List bytes of the edited image.

After receiving the edited image (either cropped file path or editor bytes), create a Custom Action that uploads to Firebase Storage. For file path: create a File reference and use FirebaseStorage.instance.ref('edited/filename.jpg').putFile(file). For bytes: use putData(bytes). Get the download URL and update the relevant Firestore document (e.g., user.avatarUrl or product.imageUrl).

Large camera photos (4000x3000px, 5MB+) can crash the editor on low-memory devices. Create a Custom Action that resizes the image before opening the editor: use the image package to decode the image, call copyResize(image, width: 2048) to limit the longest side to 2048 pixels, then encode as JPEG with quality 85. This produces a ~500KB file that edits smoothly on any device.