animated_image_list

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包，提供带有视差效果的动画图像列表以及全屏查看图像的灯箱功能。它通过视差效果提供深度感知，实现流畅的交互式滚动，从而提升用户体验，非常适合展示图像画廊或作品集。灯箱功能允许用户点击图像以查看详细内容，并支持图像间的无缝导航。专为跨平台使用而设计，可在 Android、iOS、Web、macOS、Windows 和 Linux 上运行。

适合场景

图像画廊
投资组合显示
产品展示
互动叙事
社交媒体动态

主要特点

视差滚动效果
图片画廊查看器
跨平台兼容性
流畅的动画
可自定义的过渡效果
响应式设计

适合对象

开发视觉密集型应用的开发者
寻求引人入胜的UI组件的设计人员
需要沉浸式图像浏览的应用程序
带有产品图片的电子商务平台
创意数字作品集

使用建议

可能会影响大型图像集的性能
需要对低端设备进行仔细优化
动画定时的自定义选项有限
最适合中等数量的图像
不适合用于文本密集型界面
依赖外部依赖项以实现完整功能

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Animated Image List for Flutter

Flutter Animated image list with parallax effect and image lightbox .

gif

Getting Started

Add the package to your pubspec.yaml:

animated_image_list: ^0.5.0

In your dart file, import the library:

import 'package:animated_image_list/AnimatedImageList.dart';

Instead of using a ListView create a AnimatedImageList Widget:

 AnimatedImageList(
               images: arr.map((e) => e.urls.small).toList(),
               builder: (context, index, progress) {
                 return Positioned.directional(
                     textDirection: TextDirection.ltr,
                     bottom: 15,
                     start: 25,
                     child: Opacity(
                       opacity: progress > 1 ? (2 - progress) : progress,
                       child: Text(
                         arr[index].user.username ?? 'Anonymous',
                         style: TextStyle(
                             color: Colors.white,
                             fontSize: 25,
                             fontWeight: FontWeight.w500),
                       ),
                     ));
               },
               scrollDirection: Axis.vertical,
               itemExtent: 100,
               maxExtent: 400,
             ),

Parameters:

Name	Description	Required	Default value
`images`	A list of images url to display in the list by default it accepts urls if custom image needed use provider paramter	required	-
`provider`	Function which maps an url or image string to an image provider	-	-
`itemExtent`	not selected item size required to calculate animations	required	150
`maxExtent`	selected item size required to calculate animations	required	400
`scrollDirection`	List scroll direction horizontal or vertical	-	Axis.vertical
`builder`	Builder function that returns a widget to display over the image / `progress` from 0...1 item selection progress from 1...2 item leaving view could be usefull if you want to animate something like text opacity above / `index` current item index	-	-
`placeHolder`	Optional function which returns default placeholder for lightbox and error widget if image fails to load	-	kTransparentImage

搜索分类、插件与代码仓

安装插件