Any Circle images overlapping plugin in Flutter

Viewed 1887

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

3 Answers

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

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.

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