Image Preview
Image preview thumbnail with full-screen expansion dialog. Displays images from attachments or AI-generated content with zoom and pan support.
Installation
$
flai add image_preview
Import
import 'package:my_app/flai/components/image_preview/image_preview.dart';Preview
Preview
🖼
📊
Generated Image
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