hx_imagelistview 1.0.0

A customizable Flutter widget to display a list of images in a grid layout, supporting full-screen preview with zoom, swipe-to-dismiss, and hero animations.

HxImagelistview

A Flutter widget for displaying a grid of image thumbnails with support for full-screen image preview.

🇨🇳 中文文档

🇨🇳 English

✨ 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