flutter_image_overlap

Description:

flutter image overlap

OverlappingImages #
OverlappingImages is a Flutter widget that allows you to display a series of overlapping circular images, with dynamic width adjustment based on the number of images. The widget is highly customizable, enabling you to set the size of the images and the overlap spacing according to your design needs.
Screenshots #
Here are some screenshots of the OverlappingImages widget in use:

Features #

Dynamic Width: The widget automatically adjusts its width based on the number of images provided.
Customizable Image Size: You can set the radius of the circular images to fit your design.
Customizable Overlap Spacing: The spacing between overlapping images can be adjusted, giving you full control over the appearance.
Use Cases: Ideal for displaying avatars in group activities, profile photos in chats, or any scenario requiring stacked images.

Usage #
import 'package:flutter_image_overlap/flutter_image_overlap.dart';
# For network images
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return OverlappingImages(
images: [
NetworkImage('https://example.com/image1.jpg'),
NetworkImage('https://example.com/image2.jpg'),
NetworkImage('https://example.com/image3.jpg'),
],
imageRadius: 12.0, // Default radius is 12.0
overlapOffset: 10.0, // Default overlap is 10.0
);
}
}

# For assets images

class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return OverlappingImages(
images: [
AssetImage('assets/images/photo.jpeg'),
AssetImage('assets/images/photo.jpeg'),
AssetImage('assets/images/photo.jpeg'),
AssetImage('assets/images/photo.jpeg'),
],
imageRadius: 12.0, // Default radius is 12.0
overlapOffset: 10.0, // Default overlap is 10.0
);
}
}

# For file images

class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return OverlappingImages(
images: [
FileImage(File('/path/to/image1.jpg')),
FileImage(File('/path/to/image2.jpg')),
],
imageRadius: 12.0, // Default radius is 12.0
overlapOffset: 10.0, // Default overlap is 10.0
);
}
}


copied to clipboard