ImageX Flutter

A reusable Flutter image widget that simplifies handling different image sources (Asset, Network, SVG, and File) with built-in support for caching, placeholders, error widgets, and border radius.

📦 imagex_flutter

📚 Resources

📦 Pub.dev: https://pub.dev/packages/imagex_flutter
📖 Documentation: https://medium.com/@saurabhkumar91536/mastering-images-in-flutter-one-widget-to-rule-them-all-8e6880dbf4e9

Learn how to build high-performance, feature-rich image loading in Flutter with imagex_flutter, including caching, placeholders, shimmer effects, retry mechanisms, SVG support, and more.

🎥 Demo

imagex_flutter Demo

Features

Multi-source Support: Seamlessly switch between Asset, Network, File, Memory, and SVG.
Auto-detection: Automatically detects image type based on the path (URL, file path, or asset path) or provided bytes.
SVG Support: Built-in SVG rendering for all sources.
Caching: Uses cached_network_image for efficient network image loading and caching.
Easy Styling: Apply borderRadius, fit, width, height, and colorFilter (for SVGs) easily.
Shimmer Effect: Built-in shimmer effect placeholder that automatically matches image dimensions and border radius.
Customizable: Provide custom placeholder and errorWidget.

Getting started

Add imagex_flutter to your pubspec.yaml:

dependencies:
  imagex_flutter: ^0.0.1

Then run:

flutter pub get

Usage

Simple Usage (Auto-detection)

import 'package:imagex_flutter/imagex_flutter.dart';

// Network Image
ImageX(path: 'https://example.com/image.png')

// Asset Image
ImageX(path: 'assets/images/logo.png')

// SVG Image (Asset)
ImageX(path: 'assets/images/icon.svg')

// Memory Image
ImageX(bytes: myUint8List)

Advanced Usage

ImageX(
  path: 'https://example.com/image.png',
  // or use bytes for memory images
  // bytes: myUint8List, 
  width: 100,
  height: 100,
  borderRadius: 12.0,
  fit: BoxFit.cover,
  errorWidget: Icon(Icons.error),
)

SVG with Color Filter

ImageX(
  path: 'assets/icons/home.svg',
  svgColor: ColorFilter.mode(Colors.blue, BlendMode.srcIn),
)

Full-screen Image Viewer

ImageX has a built-in image viewer. You can enable it by setting useImageViewer: true.

// Single image viewer
ImageX(
  path: 'https://example.com/image.png',
  useImageViewer: true,
)

// Gallery (multiple images)
ImageX(
  path: 'https://example.com/image1.png',
  useImageViewer: true,
  imageList: [
    'https://example.com/image1.png',
    'https://example.com/image2.png',
    'https://example.com/image3.png',
  ],
)

Additional information

For issues or contributions, please visit the repository.