HxImagelistview
A Flutter widget for displaying a grid of image thumbnails with support for full-screen image preview.
β¨ Features
- Custom image model support
- Grid-style image layout
- Hero animations
- Full-screen preview with zoom and pan (using
extended_image) - Smooth swipe-to-dismiss
- Highly customizable: spacing, padding, border, radius, etc.
π¦ Installation
Add extended_image, get to your pubspec.yaml:
dependencies:
extended_image: ^8.0.2
get: ^4.6.6
𧱠Usage
import 'package:hx_imagelistview/hx_imagelistview.dart';
HxImagelistview<YourModel>(
list: imageList,
getImageUrl: (item) => item.url,
width: 100,
height: 100,
itemRadius: BorderRadius.circular(8),
itemBorder: Border.all(color: Colors.grey.shade300),
padding: EdgeInsets.all(10),
);
π Parameter Description
| Parameter | Type | Required | Description |
|---|---|---|---|
| list | List<T> |
β | The list of image model data |
| getImageUrl | String Function(T) |
β | Extracts the image URL from each item |
| width | double |
β | Image width |
| height | double |
β | Image height |
| spacing | double? |
β | Horizontal spacing between images (default 10) |
| runSpacing | double? |
β | Vertical spacing between rows (default 10) |
| padding | EdgeInsetsGeometry? |
β | Inner padding |
| margin | EdgeInsetsGeometry? |
β | Outer margin |
| decoration | BoxDecoration? |
β | Custom container style |
| itemRadius | BorderRadius? |
β | Border radius for each image |
| itemBorder | Border? |
β | Border style for each image |
π· Image Preview
Clicking on an image thumbnail opens it in full-screen mode with zoom and swipe-to-dismiss support.
π File Structure
-
hx_imagelistview.dart: Main component
-
HxImagePreviewPage.dart: Full-screen image preview page
π€ Author
Huang Xin