avatar_stack 1.2.0 copy "avatar_stack: ^1.2.0" to clipboard
avatar_stack: ^1.2.0 copied to clipboard

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 #

Build Status Coverage Status Pub

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

Example

Features #

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

Examples #

Avatar stack:

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

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.

143
likes
150
pub points
95%
popularity

Publisher

unverified uploader

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (LICENSE)

Dependencies

flutter

More

Packages that depend on avatar_stack