Building profile image stack in Flutter

Recently I came across so many sites and apps which are using image stack for showing information such as like by, people tagged in the task, people who can have access and other information being displayed as shown in the above image.

I started learning more about such pattern to display data and this leads me to tweet by Steve Schoger which looks good and I started implementing it in Flutter to achieve UI as displayed in this tweet.

After creating UI in Flutter, I wanted to share it with the community and thus, I created a highly customizable flutter package to achieve image stack UI easily in any flutter project.

Pub Package: image_stack

Github Repo: image_stack

Installation

In the dependencies: section of your pubspec.yaml, add the following line:

image_stack: ^1.0.1 # or latest version

Usage

  1. Import image_stack in dart file:
import 'package:image_stack/image_stack.dart';

2. Use ImageStack widget to create image stack UI:

class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
List<string> images = ["image1Link", "image2Link", "image3Link"];
return ImageStack(
imageList: images,
imageRadius: 25, // Radius of each images
imageCount: 3, // Maximum number of images to be shown
imageBorderWidth: 3, // Border width around the images
);
}
}

This will create an image stack UI with 3 images.

This package is highly customizable, with only one mandatory property which is imageList , you have to pass image list having link of all the images which you want to display.

Below mentioned property are optional and can be easily used for customization:

imageRadius -> Radius of image in px
imageCount -> Maximum number of images to be displayed in stack
imageBorderWidth -> Width of each image border in px
imageBorderColor -> Color of image border
extraCountTextStyle -> Text style for extra count in last
backgroundColor -> Background color

The above property are can provided to customize the default UI to generate to achieve desired result.

Output

UI created by this package will be very similar to the image shown above.

So, you can easily achieve image stack UI using image_stack and customize it as per your need.

You can follow me on Twitter or find me on GitHub.

Star the package repo on Github.

Find this post and flutter package useful, show some love and give claps.

--

--

ReactJS | Flutter | Django | Volunteer@bangpypers

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Piyush Maurya

Piyush Maurya

ReactJS | Flutter | Django | Volunteer@bangpypers