Image Multi Type #

English | العربية

English #

A comprehensive Flutter package for handling multiple image types with advanced caching, error handling, and support for various image formats.

✨ Features #

• Multiple Image Types: Support for network, asset, SVG, file, and custom widgets
• Smart Caching: Built-in caching for network images with error handling
• Flexible Widgets: Circle, rounded, and custom image widgets
• Error Handling: Configurable error widgets and fallback images
• Performance: Optimized for smooth scrolling and memory management

🚀 Installation #

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

dependencies:
  image_multi_type: ^1.0.0

📖 Usage #

Basic ImageMultiType Widget

import 'package:image_multi_type/image_multi_type.dart';

// Network image
ImageMultiType(
  url: 'https://example.com/image.jpg',
  height: 200,
  width: 200,
  fit: BoxFit.cover,
)

// Asset image
ImageMultiType(
  url: 'assets/images/logo.png',
  height: 100,
  width: 100,
)

// SVG asset
ImageMultiType(
  url: 'assets/icons/icon.svg',
  height: 50,
  width: 50,
  color: Colors.blue,
)

Circle Image Widget

CircleImageWidget(
  url: 'https://example.com/profile.jpg',
  size: 80,
  color: Colors.grey[200],
  margin: EdgeInsets.all(8),
)

Rounded Image Widget

RoundImageWidget(
  url: 'https://example.com/card.jpg',
  height: 200,
  width: 300,
  radios: 16,
  fit: BoxFit.cover,
)

Setting Error Image

// Set a custom error image
setImageMultiTypeErrorImage('assets/images/error.png');

// Or use a widget
setImageMultiTypeErrorImage(
  Icon(Icons.error, color: Colors.red, size: 50)
);

Advanced Usage

// File from bytes
ImageMultiType(
  url: Uint8List.fromList([...]),
  height: 200,
  width: 200,
)

// Async file loading
ImageMultiType(
  url: Future<Uint8List>.value(Uint8List.fromList([...])),
  height: 200,
  width: 200,
)

// Custom widget
ImageMultiType(
  url: Container(
    color: Colors.blue,
    child: Text('Custom Widget'),
  ),
  height: 100,
  width: 100,
)

🔧 API Reference #

ImageMultiType

CircleImageWidget

RoundImageWidget

📱 Example App #

Check out the example folder for a complete working app demonstrating all features.

🤝 Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License #

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

العربية #

حزمة Flutter شاملة لمعالجة أنواع متعددة من الصور مع دعم التخزين المؤقت المتقدم ومعالجة الأخطاء ودعم تنسيقات الصور المختلفة.

✨ المميزات #

• أنواع متعددة من الصور: دعم للصور من الإنترنت والأصول وملفات SVG والملفات والعناصر المخصصة
• تخزين مؤقت ذكي: تخزين مؤقت مدمج للصور من الإنترنت مع معالجة الأخطاء
• عناصر مرنة: عناصر صور دائرية ومستديرة ومخصصة
• معالجة الأخطاء: عناصر أخطاء قابلة للتكوين وصور احتياطية
• الأداء: محسّن للتمرير السلس وإدارة الذاكرة

🚀 التثبيت #

أضف هذا إلى ملف pubspec.yaml في مشروعك:

dependencies:
  image_multi_type: ^1.0.0

📖 الاستخدام #

عنصر ImageMultiType الأساسي

import 'package:image_multi_type/image_multi_type.dart';

// صورة من الإنترنت
ImageMultiType(
  url: 'https://example.com/image.jpg',
  height: 200,
  width: 200,
  fit: BoxFit.cover,
)

// صورة من الأصول
ImageMultiType(
  url: 'assets/images/logo.png',
  height: 100,
  width: 100,
)

// ملف SVG من الأصول
ImageMultiType(
  url: 'assets/icons/icon.svg',
  height: 50,
  width: 50,
  color: Colors.blue,
)

عنصر الصورة الدائرية

CircleImageWidget(
  url: 'https://example.com/profile.jpg',
  size: 80,
  color: Colors.grey[200],
  margin: EdgeInsets.all(8),
)

عنصر الصورة المستديرة

RoundImageWidget(
  url: 'https://example.com/card.jpg',
  height: 200,
  width: 300,
  radios: 16,
  fit: BoxFit.cover,
)

تعيين صورة الخطأ

// تعيين صورة خطأ مخصصة
setImageMultiTypeErrorImage('assets/images/error.png');

// أو استخدام عنصر
setImageMultiTypeErrorImage(
  Icon(Icons.error, color: Colors.red, size: 50)
);

استخدام متقدم

// ملف من البايتات
ImageMultiType(
  url: Uint8List.fromList([...]),
  height: 200,
  width: 200,
)

// تحميل ملف غير متزامن
ImageMultiType(
  url: Future<Uint8List>.value(Uint8List.fromList([...])),
  height: 200,
  width: 200,
)

// عنصر مخصص
ImageMultiType(
  url: Container(
    color: Colors.blue,
    child: Text('عنصر مخصص'),
  ),
  height: 100,
  width: 100,
)

🔧 مرجع API #

ImageMultiType

CircleImageWidget

RoundImageWidget

📱 تطبيق المثال #

تحقق من مجلد example للحصول على تطبيق كامل يعمل ويوضح جميع المميزات.

🤝 المساهمة #

نرحب بالمساهمات! لا تتردد في إرسال طلب سحب.

📄 الترخيص #

هذا المشروع مرخص بموجب رخصة MIT - راجع ملف LICENSE للتفاصيل.