Multiple Pile Faces

Multiple Pile Faces package lets you display a stacked list of users/persons in your Flutter app.

Features

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.

thumb

Getting started

Add the latest version of package to your pubspec.yaml (and run dart 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';

Usage

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:

https://user-images.githubusercontent.com/68671238/193429465-5f83de54-d103-45d9-a3da-78937372cd63.mp4

Next Goals

We are working on some improvements including:

Make the widget more customizable.

Issues & Feedback

Please file an issue! to send feedback or report a bug. Thank you!