Is there any plugin in Flutter which could achieve something like the profile picture preview of persons who liked the picture on Instagram?
Is there any plugin in Flutter which could achieve something like the profile picture preview of persons who liked the picture on Instagram?
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
),
),
),
],
),
);
}
}