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.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:hx_imagelistview/hx_imagelistview.dart';
import 'model/AttachmentModel.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(375, 812),
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (context, child) => GetMaterialApp(
        debugShowCheckedModeBanner: false,
        home: child,
      ),
      child: HomeAppPage(),
    );
  }
}

class HomeAppPage extends StatelessWidget {
  HomeAppPage({super.key});

  List<AttachmentModel> list = [];

  List imageUrls = [
    "http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
    "http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
    "http://gips1.baidu.com/it/u=1971954603,2916157720&fm=3028&app=3028&f=JPEG&fmt=auto?w=1920&h=2560",
    "http://gips0.baidu.com/it/u=3560029307,576412274&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280"
  ];

  @override
  Widget build(BuildContext context) {
    for (var element in imageUrls) {
      AttachmentModel model = AttachmentModel();
      model.viewUrl = element;
      list.add(model);
    }
    return Scaffold(
      appBar: AppBar(
        title: Text("示例"),
      ),
      body: bodyView(),
    );
  }

  bodyView() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          margin: EdgeInsets.all(10),
          child: Text("图片示例"),
        ),
        HxImagelistview(
            list: list,
            margin: EdgeInsets.symmetric(horizontal: 10),
            getImageUrl: (item) => item.viewUrl ?? "",
            width: (ScreenUtil().screenWidth - 50) / 3,
            height: 100)
      ],
    );
  }
}