PreImageView Documentation #

PreImageView #

A versatile Flutter image widget that simplifies displaying various image types (PNG, SVG, Lottie animations) from different sources (assets, network, file) with advanced customization options.

Features #

• Multiple Image Types Support: PNG, SVG, Lottie animations, and more
• Multiple Sources: Load from assets, network, or file system
• Smart Type Detection: Automatically detects image type based on path/URL
• Advanced Styling: Customize with borders, shadows, shapes, and more
• Image Effects: Apply blur, color filters, and blend modes
• Loading Indicators: Customizable loading indicators for network images
• Error Handling: Graceful fallback to placeholder when images fail to load
• Performance Optimized: Memory caching for better performance

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  pre_image_view: ^1.0.0

Then run:

flutter pub get

Usage #

Basic Usage #

// Asset Image
PreImageView(
  'assets/images/sample.png',
  height: 200,
  width: 200,
)

// Network Image
PreImageView(
  'https://example.com/image.jpg',
  height: 200,
  width: 200,
)

// SVG Image
PreImageView(
  'assets/images/icon.svg',
  height: 200,
  width: 200,
)

// Lottie Animation
PreImageView(
  'assets/animations/loading.json',
  height: 200,
  width: 200,
)

Advanced Styling #

PreImageView(
  'https://example.com/image.jpg',
  height: 200,
  width: 200,
  fit: BoxFit.cover,
  borderRadius: BorderRadius.circular(16),
  border: Border.all(color: Colors.blue, width: 2),
  boxShadow: [
    BoxShadow(
      color: Colors.black.withOpacity(0.2),
      spreadRadius: 2,
      blurRadius: 10,
      offset: Offset(0, 5),
    ),
  ],
)

Image Effects #

// Blur Effect
PreImageView(
  'https://example.com/image.jpg',
  height: 200,
  width: 200,
  imageFilter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
)

// Color Blend
PreImageView(
  'https://example.com/image.jpg',
  height: 200,
  width: 200,
  svgColor: Colors.blue.withOpacity(0.5),
  blendMode: BlendMode.colorBurn,
)

Custom Loading #

PreImageView(
  'https://example.com/image.jpg',
  height: 200,
  width: 200,
  showLoadingProgress: true,
  progressIndicatorColor: Colors.red,
  progressIndicatorSize: 40,
  placeholder: Icon(
    Icons.image,
    size: 50,
    color: Colors.grey,
  ),
)

Parameters #

Image Type Detection #

PreImageView automatically detects the image type based on the path or URL:

• URLs starting with http or https are treated as network images
• Paths ending with .svg are treated as SVG images
• Paths ending with .json or .zip are treated as Lottie animations
• Paths starting with file:// are treated as file system images
• All other paths are treated as asset images

Dependencies #

This package depends on:

• cached_network_image for network image caching
• flutter_svg for SVG rendering
• lottie for Lottie animations

Contributing #

Contributions are welcome! If you find a bug or want a feature, please open an issue.

License #

This project is licensed under the MIT License - see the LICENSE file for details.

This README provides comprehensive documentation for your PreImageView package, including:

1. An overview of the package's features
2. Installation instructions
3. Usage examples for different scenarios
4. Detailed parameter descriptions
5. Explanation of image type detection
6. Dependencies information
7. Links to example code and license