Multiple Pile Faces package lets you display a stacked list of users/persons in your Flutter app.
The FacePile
widget is built to be a unique stacked list
that can be used in your Flutter app.This widget is often used to assign tasks to individuals inside a workflow or to share who has access to a certain view or file. Each circle has a picture of the person it symbolizes.
The package will handle the animation by itself.
- Add the latest version of package to your
pubspec.yaml
(and rundart pub get
):
dependencies:
multi_pile_faces: ^1.0.0
- Import the package and use it in your Flutter App.
import 'package:multi_pile_faces/multi_pile_faces.dart';
There are a number of properties that you can modify:
- faces (List of users)
- faceSize (Avatar size)
- facePercentOverlap (Avatar percent overlap)
- animationDuration (Animation duration)
- ... etc.
Example Usage ( complete with all params ):
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 200),
child: FacePile(
faces: _allUsers,
faceSize: 42,
facePercentOverlap: .4,
borderColor: Colors.white,
nameLabelColor: Colors.black,
borderWidth: 0.4,
animationDuration: const Duration(milliseconds: 500),
),
),
),
floatingActionButton: Row(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.only(right: 18.0),
child: ElevatedButton(
child: const Text('Remove User Icon'),
style: ElevatedButton.styleFrom(
primary: Colors.red,
),
onPressed: _removeUserFromPile,
),
),
FloatingActionButton(
onPressed: _addUserToPile,
mini: true,
backgroundColor: Colors.white,
child: const Icon(Icons.add, color: Colors.black,),
),
],
),
);
}
|
Here's what it looks like:
Multiple.pile.faces.demo.mp4 |
We are working on some improvements including:
- Make the widget more customizable.
Please file an issue! to send feedback or report a bug. Thank you!