avatar_stack 1.0.2 avatar_stack: ^1.0.2 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 #
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