Any Circle images overlapping plugin in Flutter

Question

Is there any plugin in Flutter which could achieve something like the profile picture preview of persons who liked the picture on Instagram?

score 6 · Answer 1 · answered Jun 18 '20 at 12:04

There is no plugin but you can make a custom one using circle avatars(with white border) in a stack.

class CustomAvatars extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 80,
      height: 40,
      color: Colors.white,
      child: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.centerRight,
            child: CircleAvatar(
              backgroundColor: Colors.white,
              child: CircleAvatar(
                radius: 18,
                backgroundColor: Colors.red,
                child: Image.asset('assets\image'), // Provide your custom image
              ),
            ),
          ),
          Align(
            alignment: Alignment.center,
            child: CircleAvatar(
              backgroundColor: Colors.white,
              child: CircleAvatar(
                radius: 18,
                backgroundColor: Colors.red,
                child: Image.asset('assets\image'), // Provide your custom image
              ),
            ),
          ),
          Align(
            alignment: Alignment.centerLeft,
            child: CircleAvatar(
              backgroundColor: Colors.white,
              child: CircleAvatar(
                radius: 18,
                backgroundColor: Colors.red,
                child: Image.asset('assets\image'), // Provide your custom image
              ),
            ),
          ),
        ],
      ),
    );
  }
}

thanks but the Align doesn't overlap them like in the image attached. — notarealgreal, Jun 26 '20 at 12:08
It does when you are using stack widget, check if you are using stack — Nehal, Jun 27 '20 at 08:15

score 6 · Answer 2 · answered Feb 14 '21 at 13:06

Or you can use Align inside of ListView(); widget

Widget _stackedHeads() => Container(
      width: double.infinity,
      height: 100,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
          itemCount: 4,
          itemBuilder: (context, index) {
            return Align(
              widthFactor: 0.6,
              child: CircleAvatar(
                backgroundColor: Colors.white,
                child: CircleAvatar(
                  radius: 18,

                  backgroundImage: NetworkImage(
                      'https://www.jessleewong.com/wp-content/uploads/2019/12/jessleewong_20191109_3.jpg'), // Provide your custom image
                ),
              ),
            );
          }));

cames in handy when your content is dynamic, in that code in Align(); widget property widthFactor: determines how much in horizontal they should overlap.

score 1 · Answer 3 · answered Feb 03 '21 at 10:49

There is no plugin but you can make a custom one using circle avatars and positioned in a stack.

      import 'package:flutter/material.dart';
      class CustomAvatar extends StatelessWidget {
        @override
        Widget build(BuildContext context) {
          return Container(
            width: 80,
            height: 40,
            color: Colors.white,
            child: Stack(
              children: <Widget>[
                Positioned(
                  left: 0,
                    child: CircleAvatar(
                    backgroundColor: Colors.white,
                    child: CircleAvatar(
                      radius: 18,
                      backgroundColor: Colors.red,
                      child: Image.asset('assets\image'), // Provide your custom image
                    ),
                  ),
                ),
                Positioned(
                  left: 8,
                    child: CircleAvatar(
                    backgroundColor: Colors.white,
                    child: CircleAvatar(
                      radius: 18,
                      backgroundColor: Colors.red,
                      child: Image.asset('assets\image'), // Provide your custom image
                    ),
                  ),
                ),
                Positioned(
                  left: 16,
                    child: CircleAvatar(
                    backgroundColor: Colors.white,
                    child: CircleAvatar(
                      radius: 18,
                      backgroundColor: Colors.red,
                      child: Image.asset('assets\image'), // Provide your custom image
                    ),
                  ),
                ),
              ],
            ),
          );
        }
      }

score 1 · Accepted Answer · answered Nov 08 '22 at 14:58

You could try my package (signed_spacing_flex). It's exactly the same as a normal Row (or Column and Flex). But it also lets you set negative spacing which causes its children to overlap. You can also set which children should be on top when they overlap.

In your case it would be something like:

const imageURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Instagram_logo_2022.svg/150px-Instagram_logo_2022.svg.png";

SignedSpacingRow(
  spacing: -16.0,
  stackingOrder: StackingOrder.firstOnTop,
  children: const [
    CircleAvatar(
      backgroundColor: Colors.white,
      child: CircleAvatar(
        radius: 18,
        backgroundImage: NetworkImage(imageURL),
      ),
    ),
    CircleAvatar(
      backgroundColor: Colors.white,
      child: CircleAvatar(
        radius: 18,
        backgroundImage: NetworkImage(imageURL),
      ),
    ),
    CircleAvatar(
      backgroundColor: Colors.white,
      child: CircleAvatar(
        radius: 18,
        backgroundImage: NetworkImage(imageURL),
      ),
    ),
  ],
),

It also works with expanded children if you need.

Any Circle images overlapping plugin in Flutter

4 Answers4