插件详情v3.0.0

avatar_stack

带设置的高级且灵活的头像堆叠。它允许在小空间内放置大量头像或其他小部件。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文档源代码

近 30 天下载: 7490
喜欢数: 200
Pub 分数: 155

安装插件

flutter pub add avatar_stack

插件介绍

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

AvatarStack 是一个 Flutter 包，可高效地以紧凑且视觉上吸引人的堆叠方式显示多个头像或小部件。专为聊天界面、群组资料和协作应用设计，支持自定义间距、溢出处理和分层渲染。该包轻量且高度可定制，使开发者能够用最少的代码集成动态头像组。它可在所有主要平台（包括 Android、iOS、Web、macOS、Windows 和 Linux）上运行。

适合场景

群聊指示器
团队成员显示
协作项目化身
社交媒体用户群集
配置文件组预览

主要特点

可自定义的头像堆叠
带计数徽章的溢出处理
支持任何小部件，而不仅仅是头像
跨设备的响应式布局
平滑的层叠和 z-index 控制
跨平台兼容性

适合对象

聊天应用
团队协作工具
社交网络功能
仪表板用户指标
包含密集用户数据的UI

使用建议

当头像数量非常大时，性能可能会下降
内置样式选项有限，仅限基本配置
需要手动处理堆叠项上的点击交互
未针对极高频率的更新进行优化

原始 README

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

Avatar stack with animation

Avatar stack is used to visually represent users, places, and things in a limited space.

Example

Try Live Demo :-)

Example

import 'package:avatar_stack/animated_avatar_stack.dart';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: Scaffold(
    body: Center(
      child: AnimatedAvatarStack(
        height: 50,
        avatars: [
          for (var n = 0; n < 15; n++) NetworkImage('https://i.pravatar.cc/150?img=$n'),
        ],
      ),
    ),
  ),
));

Features

Example

Restrict amount of items

Usually the stack avatar shows all items as possible but you can restrict it by, say, five items. Restrict amount of items

Alignment

By default the stack avatar has left alignment one can change it.

center alignment

right alignment

Coverage

You can set how avatars will coverage each others.

max coverage is set to 70%

min coverage is set to minus 50%

The negative coverage will set space between items. min coverage is set to minus 50%

Any widget for stack

You can use any widget to stack not only avatars Any widget for stack

Indent of an info item

The additional space between an info item (if exists) and other items. Indent of an info item

Stack laying

The way to tile items.

the first item is at the top

Indent of an info item

the fifth item is at the top

Indent of an info item

One can use any widget for stacking. Apply WidgetStack widget for that. For example:

import 'package:avatar_stack/avatar_stack.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: Example7WidgetStack()));
}

class Example7WidgetStack extends StatelessWidget {
  const Example7WidgetStack({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final settings = RestrictedPositions(
      maxCoverage: -0.1,
      minCoverage: -0.5,
      align: StackAlign.right,
    );
    return Column(
      children: [
        const Text(
          'Any widgets for stack:',
        ),
        const SizedBox(height: 10),
        SizedBox(
          height: 50,
          child: WidgetStack(
            positions: settings,
            stackedWidgets: [
              for (var n = 0; n < 12; n++)
                FlutterLogo(
                  style: FlutterLogoStyle.stacked,
                  textColor: Color(0xFF * 0x1000000 +
                      n * 10 * 0x10000 +
                      (0xFF - n * 10) * 0x100),
                ),
              const FittedBox(
                  fit: BoxFit.fitHeight,
                  child: Text('A',
                      style: TextStyle(height: 0.9, color: Colors.orange))),
              const FittedBox(
                  fit: BoxFit.fitHeight,
                  child: Text('B', style: TextStyle(height: 0.9))),
              const FittedBox(
                  fit: BoxFit.fitHeight,
                  child: Text('C',
                      style: TextStyle(height: 0.9, color: Colors.green))),
            ],
            buildInfoWidget: (surplus) {
              return Center(
                  child: Text(
                '+$surplus',
                style: Theme.of(context).textTheme.headline5,
              ));
            },
          ),
        ),
      ],
    );
  }
}