How to Add a Dynamic Image Gallery with Filters to Your App (Copy-Paste Prompts)

Fetch your categories from a Supabase gallery_categories table and display them as a horizontally scrollable Row of FilterChip widgets. Store the selected category slug in FlutterFlow App State or a page state variable. In each chip's onSelected callback, update the selected category and trigger a re-fetch of gallery_images with .eq('category', selectedCategory). To show 'All' images, use an empty string for the category value and omit the .eq() filter when it's empty.

flutter_staggered_grid_view (^0.7.x) is the standard choice. Use StaggeredGridView.countBuilder with crossAxisCount: 3 and crossAxisCellCount varying per item to create Pinterest-style variable-height columns. One caveat: this package requires a Custom Widget registration in FlutterFlow. If you don't specifically need masonry, GridView.builder with a fixed childAspectRatio is simpler, requires no Custom Widget in FlutterFlow, and handles most gallery use cases well.

Use the photo_view package (^0.15.x). For a single image: PhotoView(imageProvider: CachedNetworkImageProvider(imageUrl)). For swipe navigation between images: PhotoViewGallery.builder(itemCount: images.length, builder: (ctx, i) => PhotoViewGalleryPageOptions(imageProvider: CachedNetworkImageProvider(images[i].imageUrl))). Set minScale: PhotoViewComputedScale.contained and maxScale: 4.0 for reasonable zoom limits. In FlutterFlow, register photo_view as a Custom Widget.

Use CachedNetworkImage (^3.4.x) as the image widget inside each GridView cell. It fetches images on-demand as they scroll into view and caches them to disk so repeat scrolling doesn't re-fetch. Add a placeholder using the placeholder builder with a Shimmer.fromColors widget from the shimmer package — this shows an animated grey shimmer where each image will appear. GridView.builder is inherently lazy (it only builds visible items), so combining it with CachedNetworkImage gives full lazy loading with no additional setup.

Yes. When multiple categories are selected, use Supabase's .in_('category', selectedCategoryList) instead of .eq(). In FlutterFlow, maintain a list variable of selected category slugs; add or remove slugs when chips are tapped; pass the list to the Backend Query's filter. For tag-based multi-filter (where an image can have multiple tags), use .overlaps('tags', selectedTagList) on a text[] column — this returns images that have at least one tag in common with the selected list.

Add a Flutter SearchBar widget (Material 3) at the top of the page. In FlutterFlow, connect onChange to an App State variable that holds the search query. Use a Timer to debounce: start a 400 ms timer on each onChange; cancel and restart it if another change fires before it completes; when it fires, re-execute the Backend Query with .ilike('title', '%searchQuery%'). To search tags, add .or('tags.cs.{searchQuery}') to the query — but this requires the tags column to be type text[] and the GIN index to be present.

Wrap the GridView in a RefreshIndicator widget. The onRefresh callback must be an async function that returns a Future — FlutterFlow's Backend Query refetch action satisfies this. For infinite scroll galleries, the onRefresh callback must also reset the page counter variable to 0 before calling refetch, otherwise the refresh loads page 2 instead of starting from the beginning. Show a LinearProgressIndicator at the top while refreshing to give users feedback on slower connections.

Use Flutter's Hero widget. Wrap the grid thumbnail in Hero(tag: image.id, child: Image(...)) and wrap the full-screen image in Hero(tag: image.id, child: PhotoView(...)) using the same tag. Flutter automatically animates between them when you push the full-screen route. The animation works best with Navigator.push using a MaterialPageRoute — the Hero animation respects the route transition timing. In FlutterFlow, set the Hero tag to the image's unique ID on both the grid item widget and the full-screen page image widget.