imageflutteroverlappingcircleimage

Any Circle images overlapping plugin in Flutter

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

enter image description here

Solution

  • 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.