Image Preview

Image preview thumbnail with full-screen expansion dialog. Displays images from attachments or AI-generated content with zoom and pan support.

Preview

Installation

Import

import 'package:my_app/flai/components/image_preview/image_preview.dart';

Usage

// Network image
FlaiImagePreview(
  imageUrl: 'https://example.com/chart.png',
  alt: 'Sales chart for Q4',
)

// From an attachment
FlaiImagePreview(
  imageUrl: attachment.url!,
  alt: attachment.name,
  thumbnailSize: Size(200, 150),
)

// With custom placeholder
FlaiImagePreview(
  imageUrl: imageUrl,
  placeholder: CircularProgressIndicator(),
  errorWidget: Icon(Icons.broken_image),
)

Properties

Property	Type	Default	Description
imageUrl	String	required	URL of the image to display.
alt	String?	null	Alt text for accessibility.
thumbnailSize	Size?	null	Fixed thumbnail size. Auto-sized if null.
placeholder	Widget?	null	Widget shown while image loads.
errorWidget	Widget?	null	Widget shown on load error.

Features

• Thumbnail view — Rounded corners, constrained size, tap to expand
• Full-screen dialog — Hero animation transition, dark overlay
• Zoom and pan — InteractiveViewer for pinch-to-zoom in full-screen
• Loading state — Placeholder widget while image loads
• Error handling — Fallback widget on network or decode errors