How to Create an Advanced Photo Gallery with Editing Features in FlutterFlow

In the Firebase Console, go to Extensions, search for Resize Images, and install it. Configure it to generate 200x200 thumbnails and store them with a _200x200 suffix in the same Storage path. When a user uploads photos/abc123.jpg, the extension automatically creates photos/abc123_200x200.jpg. In Firestore, create a photos collection with fields: imageUrl (String — full resolution URL), thumbnailUrl (String — the 200x200 URL), width (Integer), height (Integer), userId (String), createdAt (Timestamp), and isSelected (Boolean, default false — used for UI multi-select state). In FlutterFlow's Firestore panel, import the schema and create the photos Document Type.

Create a new page called Gallery. Add a Backend Query at the page level streaming the photos collection filtered by userId equals currentUser.uid, ordered by createdAt descending. Add a GridView widget set to 3 columns with 2px spacing. Inside the GridView, add an Image widget. Bind the image source to the thumbnailUrl field of each photo document — this loads the small 200x200 version, not the 5MB original. Add a GestureDetector wrapping each grid item to handle two gestures: On Tap (navigate to detail view, passing the photo document reference) and On Long Press (enter multi-select mode by updating an App State variable isMultiSelectMode to true and toggling the current photo's isSelected field). Add a Conditional Visibility overlay on each grid item showing a blue checkmark icon when isMultiSelectMode is true and the photo's isSelected is true.

Create a new page called PhotoDetail. Pass the photo document reference as a page parameter. At the page level, query the photos collection to get the full list for the current user (so users can swipe between photos). Add a PageView widget and set its initial page to the index of the passed photo in the list. Inside the PageView, add an InteractiveViewer widget — this is a built-in Flutter widget available in FlutterFlow under the Widgets panel. Set its minScale to 0.5 and maxScale to 4.0. Inside InteractiveViewer, add an Image widget bound to the 800x800 medium-resolution URL. Add a back arrow IconButton in the top-left and an Edit button IconButton in the top-right. The Edit button opens a Bottom Sheet containing the editing options.

In FlutterFlow, go to Custom Widgets and create two widgets. The first widget is named ImageCropWidget. In the pubspec dependencies, add image_cropper: ^5.0.0 and image_picker: ^1.0.4. The widget accepts a parameter imageUrl (String) and an onCropComplete callback. It uses ImageCropper().cropImage() to display the system crop UI, then returns the cropped file path via the callback. The second widget is named ImageFilterWidget. Add photofilters: ^3.0.0 as a dependency. This widget displays a horizontal scrollable list of filter previews (Clarendon, Gingham, Moon, etc.). When a filter is selected, it applies the filter to the image bytes and returns the modified bytes via an onFilterApplied callback. In the Bottom Sheet opened by the Edit button, show two tabs — Crop and Filters — that display these Custom Widgets.

1// Custom Widget: ImageCropWidget (pubspec: image_cropper: ^5.0.0)
2import 'package:image_cropper/image_cropper.dart';
3
4class ImageCropWidget extends StatefulWidget {
5  final String imageUrl;
6  final Future<dynamic> Function(String croppedPath) onCropComplete;
7  const ImageCropWidget({Key? key, required this.imageUrl, required this.onCropComplete}) : super(key: key);
8
9  @override
10  State<ImageCropWidget> createState() => _ImageCropWidgetState();
11}
12
13class _ImageCropWidgetState extends State<ImageCropWidget> {
14  @override
15  void initState() {
16    super.initState();
17    _startCrop();
18  }
19
20  Future<void> _startCrop() async {
21    final cropped = await ImageCropper().cropImage(
22      sourcePath: widget.imageUrl,
23      uiSettings: [
24        AndroidUiSettings(toolbarTitle: 'Crop Photo', lockAspectRatio: false),
25        IOSUiSettings(title: 'Crop Photo'),
26      ],
27    );
28    if (cropped != null) {
29      widget.onCropComplete(cropped.path);
30    }
31  }
32
33  @override
34  Widget build(BuildContext context) {
35    return const Center(child: CircularProgressIndicator());
36  }
37}

Add two App State variables: isMultiSelectMode (Boolean, default false) and selectedPhotoIds (List of Strings, default empty). On long press of any grid item, set isMultiSelectMode to true and add the tapped photo's document ID to selectedPhotoIds. When isMultiSelectMode is true, show a selection toolbar at the bottom of the Gallery page using Conditional Visibility. The toolbar contains three IconButtons: Share (uses the share_plus package to share selected images), Delete (calls a Cloud Function that batch-deletes selected Firestore documents and Storage files), and Cancel (resets isMultiSelectMode to false and clears selectedPhotoIds). Add a SelectAll button in the app bar that adds all visible photo IDs to selectedPhotoIds when tapped.