flutter_image_overlap 0.0.3

OverlappingImages is a Flutter widget that displays a series of overlapping circular images. The widget dynamically adjusts its width based on the number of images provided and allows for customizat [...]

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.

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.

Example Usage

Here's a simple example of how to use the OverlappingImages widget in your Flutter app:

import 'package:flutter/material.dart';
import 'package:flutter_image_overlap/flutter_image_overlap.dart';  

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: OverlappingImages(
          images: [
            AssetImage('assets/image1.png'),
            AssetImage('assets/image2.png'),
            AssetImage('assets/image3.png'),
          ],
          imageRadius: 15.0,
          overlapOffset: 8.0,
        ),
      ),
    );
  }
}


## Usage

```dart
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
    );
  }
}

## Screenshots

Here are some screenshots of the `OverlappingImages` widget in use:

![Example Screenshot](images/image1.png)  

![Another Screenshot](images/image2.png)