搜索插件、代码仓与 APP 分类

image_stack 封面
插件详情v2.1.1

image_stack

image_stack 是一个纯 Dart 包,用于在 Flutter 中创建图像堆栈。该包为您提供了一个小部件,可轻松创建满足您需求的图像堆栈。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
3330
喜欢数
158
Pub 分数
150

安装插件

flutter pub add image_stack

插件介绍

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

image_stack 是一个纯 Dart 的 Flutter 包,提供了一个小部件,可轻松创建图像堆叠,非常适合以层叠格式显示多个个人资料图片或头像。它支持 Android、iOS、Web、macOS、Windows 和 Linux 等多种平台。该包轻量且设计简洁,使开发者能够快速实现聊天头像或团队成员展示等视觉分组,而无需复杂的配置。

适合场景

  • 在聊天界面中显示群组头像
  • 为团队或群组配置文件创建头像堆叠
  • 可视化协作应用中的用户存在状态
  • 通过分层头像设计增强用户界面
  • 构建社交媒体个人资料部分
  • 在实时应用中显示连接的用户

主要特点

  • 基于小部件的简单实现
  • 支持多平台部署
  • 可自定义的图层叠加和间距
  • 轻量且无依赖
  • 通过 pub add 轻松集成
  • 跨设备的响应式设计

适合对象

  • Flutter 开发人员构建聊天或社交应用
  • 需要视觉头像分组的设计人员
  • 需要用户存在指示器的应用程序
  • 专注于简洁、极简用户界面组件的项目
  • 创建协作或社区平台的团队

使用建议

  • 仅限基本堆叠;无高级动画
  • 不支持动态加载或错误处理的内置功能
  • 需要手动管理图像源
  • 未针对非常大的图像集进行优化
  • 最适合小型团体(3-6 张图片)
  • 可能需要额外的样式来处理复杂的布局

原始 README

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

image_stack

image_stack is a pure dart package for creating image stack in Flutter. This package give you a widget to easily create image stack for your need.

UI created by this package is mainly found in profile picture stacks in so many apps but it can be used at any place where you feel it will look good.

Pub Package: image_stack

Medium Article: Building profile image stack in Flutter

Installation

In the dependencies: section of your pubspec.yaml, add the following line:

image_stack: <latest_version>

Usage

import 'package:image_stack/image_stack.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<string> images = ["image1Link", "image2Link", "image3Link", "image4Link"];
    return ImageStack(
            imageList: images,
            totalCount: images.length // If larger than images.length, will show extra empty circle
            imageRadius: 25, // Radius of each images
            imageCount: 3, // Maximum number of images to be shown in stack
            imageBorderWidth: 3, // Border width around the images
        );
  }
}

Example

View the Flutter app in the example directory.

Screenshot

Image Stack Screenshot

Contributors

所属分类

源码仓库

使用此插件的项目