套件詳情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,
              ));
            },
          ),
        ),
      ],
    );
  }
}