cyrax111/avatar_stack

Avatar stack with animation

Build Status Coverage Status Pub

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

center alignment

right alignment

right alignment

Coverage

You can set how avatars will coverage each others.

max coverage is set to 70%

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

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.