avatar_stack 1.1.0

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

Avatar stack package for Flutter

Avatar stack is used to visually represent users, places, and things in an app.

Features

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

Example

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

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

class AvatarStackExample extends StatelessWidget {
  const AvatarStackExample({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'Example:',
              ),
              const SizedBox(height: 20),
              AvatarStack(
                height: 50,
                avatars: [
                  for (var n = 0; n < 15; n++)
                    NetworkImage('https://i.pravatar.cc/150?img=$n'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

You can also use the example from github https://github.com/cyrax111/avatar_stack/tree/master/example