Description:

avatar stack

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

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'),
],
),
],
),
),
),
);
}
}
copied to clipboard
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.