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
Libraries
- avatar_stack
- Draws widgets by calculated positions in Positions
- positions
- The main purpose of positions is to define the coordinates of each stacked widget.