Image

✅ مقدمة عن Image في Flutter

الـ Image هي ويدجت تُستخدم لعرض الصور على واجهة المستخدم. يمكن تحميل الصور من:

  • الملفات المحلية
  • الإنترنت
  • الذاكرة Memory
  • الملفات assets
  • الصورة ككائن Uint8List
✅ أنواع إنشاء صورة (Constructors)
1. Image.asset()

تحميل صورة من مجلد assets

Image.asset(
  'assets/images/logo.png',
  width: 100,
  height: 100,
)
Dart
✅ ملاحظات:
  • يجب تعريف الصورة في pubspec.yaml.
  • مناسب للصور التي تأتي مع التطبيق.
2. Image.network()

تحميل صورة من الإنترنت

Image.network(
  'https://example.com/image.png',
  loadingBuilder: (context, child, progress) {
    return progress == null ? child : CircularProgressIndicator();
  },
  errorBuilder: (context, error, stackTrace) {
    return Icon(Icons.error);
  },
)
Dart
✅ ملاحظات:
  • يدعم تحميل الصور بشكل غير متزامن.
  • يمكن التعامل مع حالات الخطأ أو التحميل.
  • تأكد من صلاحية الوصول إلى الإنترنت.
3. Image.file()

تحميل صورة من ملف محلي (مثلاً من File Picker أو Camera)

Image.file(
  File('/path/to/image.png'),
)
Dart
✅ ملاحظات:
  • تحتاج صلاحية للوصول للملفات.
4. Image.memory()

تحميل صورة من بيانات ثنائية (Uint8List)

Image.memory(
  imageBytes,
)
Dart
✅ ملاحظات:
  • مناسب للصور القادمة من API ترجع الصورة كبايتات.
5. Image.networkUrl() [تجريبية]

مثل Image.network لكن تستخدم Uri بدل String.

Image.networkUrl(
  Uri.parse('https://example.com/image.png'),
)
Dart
✅ الخصائص (Properties)
الخاصيةالوصف
width / heightعرض وارتفاع الصورة.
fitطريقة ملاءمة الصورة داخل الصندوق (BoxFit).
alignmentمحاذاة الصورة داخل المساحة المتوفرة.
colorصبغ الصورة بلون محدد (تُستخدم مع colorBlendMode).
colorBlendModeطريقة دمج اللون مع الصورة.
repeatتكرار الصورة في المحور الأفقي أو العمودي أو كلاهما (ImageRepeat).
filterQualityجودة تصفية الصورة (low, medium, high).
semanticLabelوصف بديل للصورة (مفيد لذوي الاحتياجات الخاصة).
isAntiAliasهل تُستخدم تقنية Anti-Aliasing أم لا.
matchTextDirectionهل تعكس اتجاه الصورة عند تغيير اتجاه النص (للدعم RTL).
✅ BoxFit (خاصية fit)
القيمةالتأثير
BoxFit.fillيملأ الصورة بشكل كامل مع احتمال التشويه.
BoxFit.containتناسب الحجم كاملاً مع الحفاظ على الأبعاد (قد تترك فراغ).
BoxFit.coverتغطي الصورة كامل الصندوق مع احتمال القص.
BoxFit.fitWidthتناسب العرض فقط، قد تقطع الارتفاع.
BoxFit.fitHeightتناسب الارتفاع فقط، قد تقطع العرض.
BoxFit.noneلا يتم تغيير حجم الصورة.
BoxFit.scaleDownمثل none ولكن تُصغر إذا كانت أكبر من الصندوق.
✅ ImageRepeat
القيمةالتأثير
ImageRepeat.noRepeatلا تُكرر الصورة (افتراضي).
ImageRepeat.repeatXتُكرر أفقيًا.
ImageRepeat.repeatYتُكرر عموديًا.
ImageRepeat.repeatتُكرر في كلا الاتجاهين.
✅ مثال شامل
Image.asset(
  'assets/images/flutter.png',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  alignment: Alignment.center,
  color: Colors.red.withOpacity(0.5),
  colorBlendMode: BlendMode.darken,
  repeat: ImageRepeat.noRepeat,
  filterQuality: FilterQuality.high,
  semanticLabel: 'Flutter Logo',
)
Dart
✅ التعامل مع التحميل والأخطاء (لـ Image.network)
Image.network(
  'https://example.com/photo.png',
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return Center(child: CircularProgressIndicator());
  },
  errorBuilder: (context, error, stackTrace) {
    return Icon(Icons.error);
  },
)
Dart
✅ ملاحظات مهمة
  • الصور من assets يجب تعريفها في pubspec.yaml.
  • عند استخدام Image.network يفضل إضافة loadingBuilder و errorBuilder لتحسين تجربة المستخدم.
  • fit هي من أهم الخصائص لتحديد كيف ستظهر الصورة.
  • filterQuality يمكن أن يؤثر على أداء التطبيق إذا تم ضبطه على high.
  • لا تنسَ استخدام الصور المضغوطة للحفاظ على الأداء.
✅ نصيحة لتحسين الأداء
  • استخدم CachedNetworkImage بدلاً من Image.network لتخزين الصور مؤقتًا:
CachedNetworkImage(
  imageUrl: 'https://example.com/image.png',
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
)
Dart
✅ الخلاصة
الشيءالمحتوى
الأنواعasset, network, file, memory, networkUrl
أهم الخصائصwidth, height, fit, alignment, repeat, color, colorBlendMode
التخصيصloadingBuilder, errorBuilder
التوافقRTL, وصف سمعي, أداء, تحكم كامل بالمظهر
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Main App",
      home: Scaffold(
        drawer: Drawer(),
        appBar: AppBar(title: Text("Main App"), elevation: 5),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.red,
              image: DecorationImage(image: AssetImage("images/z1.webp"), fit: BoxFit.cover)
            ),
          )
        ),
      ),
    );
  }
}
Dart