🖼️ Any Image View #

The Ultimate All-in-One Image Widget for Flutter

One widget to display any image from any source.
Network, local, SVG, Lottie, XFile – it handles everything!
📱 Mobile • 🌐 Web • 💻 Desktop

✨ Features #

• 🌐 Network Images - String URLs with auto-caching & fade animations
• 📁 XFile Support - Direct integration with image_picker (no conversion needed!)
• 📂 File Paths - Absolute & relative path strings (file://, /storage/, etc.)
• 🎨 SVG & Lottie - Both local assets and network URLs
• 🖼️ All Formats - PNG, JPG, WebP, GIF, TIFF, RAW, HEIC, HEIF, BMP, ICO, EXR, HDR
• 🔍 Zoom Support - Pinch-to-zoom & pan gestures
• ✨ Smart Loading - Beautiful shimmer loading effects
• 🛡️ Error Handling - Built-in fallback image (not_found.png)
• 🎯 Custom Styling - Borders, shadows, shapes (circle/rectangle)
• 🌍 Full Web Support - Works seamlessly on Flutter Web with CORS handling

🚀 Quick Start #

Installation #

dependencies:
  any_image_view: ^1.7.0

Basic Usage #

import 'package:any_image_view/any_image_view.dart';

AnyImageView(
  imagePath: 'https://picsum.photos/300/200',
  height: 200,
  width: 300,
  borderRadius: BorderRadius.circular(12),
)

That's it! Works with any image source automatically. 🎉

📖 Usage Examples #

Network Image (String URL) #

AnyImageView(
  imagePath: 'https://example.com/image.jpg',
  height: 200,
  width: double.infinity,
  fit: BoxFit.cover,
  borderRadius: BorderRadius.circular(12),
)

Local File Path (String) #

AnyImageView(
  imagePath: '/storage/emulated/0/Pictures/photo.jpg',  // Absolute path
  height: 200,
  width: 200,
)

// Or relative path
AnyImageView(
  imagePath: 'file:///path/to/image.jpg',
  height: 200,
  width: 200,
)

XFile (from image_picker) #

import 'package:image_picker/image_picker.dart';

// Pick image
final XFile? image = await ImagePicker().pickImage(
  source: ImageSource.gallery,
);

// Display directly - no conversion needed!
AnyImageView(
  imagePath: image,  // ✨ Direct XFile support!
  height: 250,
  width: 250,
  borderRadius: BorderRadius.circular(15),
)

File Object (dart:io) #

import 'dart:io';

File imageFile = File('/path/to/image.jpg');

// Pass File path as String
AnyImageView(
  imagePath: imageFile.path,
  height: 200,
  width: 200,
)

Asset Image #

AnyImageView(
  imagePath: 'assets/images/banner.png',
  height: 200,
  width: double.infinity,
)

SVG (Asset or Network) #

// From assets
AnyImageView(
  imagePath: 'assets/icons/logo.svg',
  height: 50,
  width: 50,
)

// From network
AnyImageView(
  imagePath: 'https://example.com/icon.svg',
  height: 50,
  width: 50,
)

Lottie Animation #

// From network
AnyImageView(
  imagePath: 'https://example.com/animation.json',
  height: 150,
  width: 150,
)

// From assets
AnyImageView(
  imagePath: 'assets/animations/loading.json',
  height: 150,
  width: 150,
)

Profile Avatar #

AnyImageView(
  imagePath: user.avatarUrl,  // Can be URL, XFile, or path!
  height: 80,
  width: 80,
  shape: BoxShape.circle,
  border: Border.all(color: Colors.blue, width: 2),
)

With Zoom #

AnyImageView(
  imagePath: imageUrl,
  enableZoom: true,  // Pinch to zoom!
  height: 400,
  width: double.infinity,
)

Custom Loading & Error #

AnyImageView(
  imagePath: imageUrl,
  placeholderWidget: CircularProgressIndicator(),
  errorWidget: Icon(Icons.broken_image, size: 50),
)

🎨 Styling Options #

AnyImageView(
  imagePath: imageUrl,
  height: 200,
  width: 200,
  
  // Shape & Border
  shape: BoxShape.circle,  // or BoxShape.rectangle
  border: Border.all(color: Colors.blue, width: 2),
  borderRadius: BorderRadius.circular(16),
  
  // Shadow
  boxShadow: [
    BoxShadow(
      color: Colors.black.withOpacity(0.2),
      blurRadius: 8,
      offset: Offset(0, 4),
    ),
  ],
  
  // Spacing
  margin: EdgeInsets.all(16),
  padding: EdgeInsets.all(8),
  
  // Image Fitting
  fit: BoxFit.cover,
  alignment: Alignment.center,
  
  // Animation
  fadeDuration: Duration(milliseconds: 500),
  
  // Interaction
  onTap: () => print('Tapped!'),
  enableZoom: true,
)

📋 API Reference #

Constructor Parameters #

imagePath Parameter Accepts: #

Supported Formats #

Auto-Detection #

The widget automatically detects the image type from:

• ✅ File extension (.svg, .json, .png, etc.)
• ✅ URL protocol (http://, https://)
• ✅ File path (file://, absolute paths)
• ✅ Object type (XFile)

💡 Pro Tips #

XFile & File Path Best Practices #

1. XFile from image_picker - Use directly, no conversion:

   final XFile? image = await ImagePicker().pickImage(source: ImageSource.gallery);
   if (image != null) {
     AnyImageView(imagePath: image)  // ✅ Direct usage
   }
   

2. File path from File object - Extract path:

   import 'dart:io';
      
   File file = File('/path/to/image.jpg');
   AnyImageView(imagePath: file.path)  // ✅ Use file.path
   

3. Check file existence for local paths:

   if (await File(path).exists()) {
     AnyImageView(imagePath: path)
   }
   

General Tips #

4. Always specify dimensions for better performance:

   AnyImageView(imagePath: url, height: 200, width: 200)
   

5. Use smaller placeholders in lists for memory efficiency

6. Add error widgets for better UX:

   errorWidget: Icon(Icons.broken_image)
   

7. Provide semantic labels for accessibility:

   Semantics(label: 'Profile picture', child: AnyImageView(...))
   

📱 Platform Support #

Web-Specific Features #

Flutter Web is fully supported! All image types work seamlessly:

// Network images - CORS handled automatically
AnyImageView(imagePath: 'https://example.com/image.jpg')

// SVG from network - Perfect for web icons
AnyImageView(imagePath: 'https://example.com/logo.svg')

// Lottie animations - Smooth on web
AnyImageView(imagePath: 'https://example.com/animation.json')

// Asset images - Bundled with your web app
AnyImageView(imagePath: 'assets/images/banner.png')

// Base64 or Data URLs also supported
AnyImageView(imagePath: 'data:image/png;base64,...')

Web Best Practices:

• ✅ Use WebP format for better compression
• ✅ Specify dimensions for faster rendering
• ✅ Network images are automatically cached
• ✅ CORS is handled by cached_network_image package

Testing on Web #

# Run on Chrome
flutter run -d chrome

# Build for web
flutter build web

# Preview build
cd build/web && python3 -m http.server 8000

Author #

Farhan Sadik Galib