How to Create a Virtual Art Gallery with AR Features in FlutterFlow

Create an artworks collection with fields: title (String), artistId (Reference to users), description (String), imageUrl (String, high-resolution image in Firebase Storage), thumbnailUrl (String, compressed for gallery grid), widthCm (Double, physical width in centimeters), heightCm (Double, physical height in centimeters), price (Double), category (String: Painting/Photography/Digital/Sculpture), medium (String, e.g., Oil on Canvas), year (Int), isForSale (Boolean). Create an artists collection with: userId (Reference), displayName (String), bio (String), avatarUrl (String), artworkCount (Int). The widthCm and heightCm fields are critical — the AR widget uses them to render the artwork at its actual physical size on the wall.

Create a GalleryPage with a top Row of category ChoiceChips (All, Painting, Photography, Digital, Sculpture). Below, display a GridView with crossAxisCount of 2 querying artworks where isForSale is true, filtered by selected category. Each grid cell shows: Image (thumbnailUrl, aspect ratio maintained), Text (title, bodyLarge), Text (artist name, bodySmall), Text (price formatted, bold). Tapping a card navigates to ArtworkDetailPage which shows the full-resolution image in a zoomable InteractiveViewer, title, artist name with tap-to-profile, description, dimensions (widthCm x heightCm), medium, year, price, and two buttons: Add to Cart and View in Your Space.

Create a Custom Widget named ARWallPreview with parameters: imageUrl (String), widthCm (Double), heightCm (Double), and an Action Parameter callback onScreenshotCaptured returning image bytes. Add ar_flutter_plugin as a dependency. In the widget, initialize an ARSessionManager and ARObjectManager. Enable plane detection for vertical surfaces (walls). Display instructional text: 'Point your camera at a wall and tap to place the artwork.' On user tap, use a hit test against detected planes. If a plane is hit, create an ARNode with a plane geometry sized to widthCm/100 by heightCm/100 (converting cm to meters for AR world units). Apply the artwork image as a texture on the plane. Allow the user to tap again to reposition. Add a pinch gesture for minor scale adjustment with a Slider showing the current scale percentage.

Not all devices support ARCore or ARKit. On the ArtworkDetailPage, run a check on page load using a Custom Action that calls ARSession.checkPlatformCompatibility(). Store the result in a Page State boolean arSupported. Use Conditional Visibility on the View in Your Space button: show it only when arSupported is true. When arSupported is false, display a Text widget: 'AR preview requires an ARCore/ARKit compatible device' in grey. This prevents crashes on unsupported devices and provides a clear explanation to the user.

In the AR view, add a camera shutter IconButton in the bottom bar. On tap, call the ARSessionManager's snapshot method to capture the current camera frame with the AR overlay. The onScreenshotCaptured callback returns the image bytes to the parent page. Show a preview Dialog of the captured image with two buttons: Share (using share_plus Custom Action to open the OS share sheet with the image and a text overlay containing the artwork title and gallery name) and Save (write image to device gallery using image_gallery_saver). Add a subtle watermark with the gallery name in the bottom corner of the screenshot.