How to Use FlutterFlow's Built-In Image Editing Features

1// Custom Action: cropAndUploadImage
2// Packages: image_cropper, image_picker, firebase_storage, firebase_auth
3// Return type: String (Firebase Storage download URL, or empty string on cancel)
4
5Future<String> cropAndUploadImage() async {
6  // 1. Pick image from gallery or camera
7  final picker = ImagePicker();
8  final XFile? picked = await picker.pickImage(
9    source: ImageSource.gallery,
10    imageQuality: 90,
11  );
12  if (picked == null) return '';
13
14  // 2. Open native crop UI
15  final CroppedFile? cropped = await ImageCropper().cropImage(
16    sourcePath: picked.path,
17    aspectRatioPresets: [
18      CropAspectRatioPreset.square,
19      CropAspectRatioPreset.ratio3x2,
20      CropAspectRatioPreset.original,
21      CropAspectRatioPreset.ratio4x3,
22      CropAspectRatioPreset.ratio16x9,
23    ],
24    uiSettings: [
25      AndroidUiSettings(
26        toolbarTitle: 'Crop Image',
27        toolbarColor: Colors.black,
28        toolbarWidgetColor: Colors.white,
29        initAspectRatio: CropAspectRatioPreset.square,
30        lockAspectRatio: false,
31        showCropGrid: true,
32      ),
33      IOSUiSettings(
34        title: 'Crop Image',
35        aspectRatioLockEnabled: false,
36        rotateButtonsHidden: false,
37      ),
38    ],
39  );
40  if (cropped == null) return '';
41
42  // 3. Upload cropped image to Firebase Storage
43  final uid = FirebaseAuth.instance.currentUser?.uid ?? 'anonymous';
44  final fileName = 'cropped_${DateTime.now().millisecondsSinceEpoch}.jpg';
45  final ref = FirebaseStorage.instance
46      .ref()
47      .child('user_images/$uid/$fileName');
48
49  final bytes = await cropped.readAsBytes();
50  final uploadTask = await ref.putData(
51    bytes,
52    SettableMetadata(contentType: 'image/jpeg'),
53  );
54
55  return await uploadTask.ref.getDownloadURL();
56}

1// Custom Action: applyImageFilter
2// Packages: image (dart), image_picker, firebase_storage, firebase_auth
3// Arguments: filterType (String: 'grayscale', 'sepia', 'brightness')
4// Return type: String (download URL)
5
6Future<String> applyImageFilter(String filterType) async {
7  final picker = ImagePicker();
8  final XFile? picked = await picker.pickImage(
9    source: ImageSource.gallery,
10    maxWidth: 1080, // Limit size for performance
11    imageQuality: 85,
12  );
13  if (picked == null) return '';
14
15  final bytes = await picked.readAsBytes();
16
17  // Decode image using 'image' package
18  img.Image? image = img.decodeImage(bytes);
19  if (image == null) return '';
20
21  // Apply selected filter
22  img.Image processed;
23  switch (filterType) {
24    case 'grayscale':
25      processed = img.grayscale(image);
26      break;
27    case 'sepia':
28      processed = img.sepia(image);
29      break;
30    case 'brightness':
31      processed = img.adjustColor(image, brightness: 1.3);
32      break;
33    case 'contrast':
34      processed = img.adjustColor(image, contrast: 1.5);
35      break;
36    default:
37      processed = image;
38  }
39
40  // Encode back to JPEG
41  final outputBytes = img.encodeJpg(processed, quality: 85);
42
43  // Upload to Firebase Storage
44  final uid = FirebaseAuth.instance.currentUser?.uid ?? 'anon';
45  final ref = FirebaseStorage.instance.ref()
46      .child('filtered/$uid/${filterType}_${DateTime.now().millisecondsSinceEpoch}.jpg');
47
48  final task = await ref.putData(
49    Uint8List.fromList(outputBytes),
50    SettableMetadata(contentType: 'image/jpeg'),
51  );
52  return await task.ref.getDownloadURL();
53}

1// Firebase Cloud Function: generateThumbnail
2// Triggers on Storage file upload
3// npm install sharp
4
5const functions = require('firebase-functions');
6const admin = require('firebase-admin');
7const sharp = require('sharp');
8const path = require('path');
9const os = require('os');
10const fs = require('fs');
11
12exports.generateThumbnail = functions.storage
13  .object()
14  .onFinalize(async (object) => {
15    const filePath = object.name;
16    const contentType = object.contentType;
17
18    // Skip non-images and already-processed thumbnails
19    if (!contentType.startsWith('image/')) return null;
20    if (path.basename(filePath).startsWith('thumb_')) return null;
21
22    const bucket = admin.storage().bucket(object.bucket);
23    const tempFilePath = path.join(os.tmpdir(), path.basename(filePath));
24    const thumbFilePath = path.join(
25      path.dirname(filePath),
26      `thumb_${path.basename(filePath).replace(/\.[^.]+$/, '.jpg')}`
27    );
28
29    // Download original
30    await bucket.file(filePath).download({ destination: tempFilePath });
31
32    // Generate thumbnail with Sharp
33    const thumbTempPath = path.join(os.tmpdir(), `thumb_${path.basename(filePath)}`);
34    await sharp(tempFilePath)
35      .resize(300, 300, { fit: 'cover', position: 'center' })
36      .jpeg({ quality: 80 })
37      .toFile(thumbTempPath);
38
39    // Upload thumbnail
40    await bucket.upload(thumbTempPath, {
41      destination: thumbFilePath,
42      metadata: { contentType: 'image/jpeg' },
43    });
44
45    // Cleanup temp files
46    fs.unlinkSync(tempFilePath);
47    fs.unlinkSync(thumbTempPath);
48
49    return null;
50  });