avatar_stack 3.0.0

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

Avatar stack with animation

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

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

copied to clipboard

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

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

copied to clipboard

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

Ideas

If you have any ideas on how to enhance this package or have any concern, feel free to make an issue.