Package detailsv3.0.0

avatar_stack

Advanced and agile avatar stack with settings. It allows to place a lot of avatars or another widgets in small place.

AndroidiOSWebmacOSWindowsLinux

pub.dev API documentation Source code

30-day downloads: 7.5K
Likes: 200
Pub points: 155

Install package

flutter pub add avatar_stack

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

AvatarStack is a Flutter package that enables the efficient display of multiple avatars or widgets in a compact, visually appealing stack. Designed for chat interfaces, group profiles, and collaborative apps, it supports customizable spacing, overflow handling, and layered rendering. The package is lightweight and highly adaptable, allowing developers to integrate dynamic avatar groups with minimal code. It works across all major platforms including Android, iOS, Web, macOS, Windows, and Linux.

Use cases

Group chat indicators
Team member displays
Collaborative project avatars
Social media user clusters
Profile group previews

Key features

Customizable avatar stacking
Overflow handling with count badges
Support for any widget, not just avatars
Responsive layout across devices
Smooth layering and z-index control
Cross-platform compatibility

Suitable for

Chat applications
Team collaboration tools
Social networking features
Dashboard user indicators
UIs with dense user data

Considerations

Performance may degrade with very large avatar counts
Limited built-in styling options beyond basic configuration
Requires manual handling of tap interactions on stacked items
Not optimized for extremely high-frequency updates

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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.

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.

Any widget for stack

You can use any widget to stack not only avatars

Indent of an info item

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

Stack laying

The way to tile items.

the first item is at the top

the fifth item is at the top

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,
              ));
            },
          ),
        ),
      ],
    );
  }
}