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?

Answer 1

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.

Answer 2

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
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 3

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
                    ),
                  ),
                ),
              ],
            ),
          );
        }
      }

Answer 4

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.