CODEWITHSUNDEEP
imageflutteroverlappingcircleimage
notarealgreal
notarealgreal

Reputation: 686

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

Upvotes: 2

Views: 3198

Answers (4)

JakesMD
JakesMD

Reputation: 2196

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.

Upvotes: 2

James Christian Kaguo
James Christian Kaguo

Reputation: 1469

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.

Upvotes: 6

MD MEHEDI HASAN
MD MEHEDI HASAN

Reputation: 2490

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

Upvotes: 1

Nehal
Nehal

Reputation: 1489

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

Upvotes: 7

Related Questions