شرح استخدام ويدجت Image في فلاتر 

إذا كنت تريد عرض الصور داخل تطبيق Flutter الخاص بك، فإن ويدجت Image هي الخِيار الأمثل لذلك. توفر ويدجت Image العديد من الخصائص التي تمكنك من تحديد خصائص الصورة المعروضة في التطبيق، سواء كانت الصور موجودة محليًا أو عبر الإنترنت. فيمَا يلي دليل شامل حول استخدام ويدجت Image في Flutter وجميع خصائصها.

ما هي ويدجت Image في فلاتر؟

في Flutter، تعتبر Image واحدة من المكونات الرئيسية التي تستخدم لعرض الصور داخل التطبيق. تقوم Image بتحميل الصور من الملفات المحلية أو عبر الإنترنت وتعرضها داخل واجهة المستخدم.

“اقرأ أيضاً: شرح استخدام ويدجت IntrinsicHeight في فلاتر“

خصائص ويدجت Image في فلاتر

Image توفر العديد من الخصائص التي تمكن المطورين من تحديد خصائص الصورة المعروضة في التطبيق ونشرح جميع خصائصها بالتفصيل:

المصدر (Image source):

تتيح لك خاصية المصدر تحديد موقع الصورة التي يجب عرضها. يمكن تحديد المصدر باستخدام القيمة AssetImage للصور الموجودة محليًا أو NetworkImage للصور المستلمة من الإنترنت.

Image(
  image: AssetImage('assets/images/my_image.png'), // مصدر الصورة المحلية
),

Image(
  image: NetworkImage('https://example.com/my_image.png'), // مصدر الصورة عبر الإنترنت
),

العرض (width) والارتفاع (height):

يتيح لك خاصية العرض والارتفاع لـ Image تعيين حجم الصورة المعروضة. يمكنك تحديد العرض والارتفاع بوحدات البكسل أو النسبة المئوية من حجم الشاشة.

Image(
  image: AssetImage('assets/images/my_image.png'),
  width: 200, // عرض الصورة بالنقاط
  height: 200, // ارتفاع الصورة بالنقاط
),

Image(
  image: AssetImage('assets/images/my_image.png'),
  width: MediaQuery.of(context).size.width * 0.5, // عرض الصورة بالنسبة المئوية
  height: MediaQuery.of(context).size.height * 0.5, // ارتفاع الصورة بالنسبة المئوية
),

“اقرأ أيضاً: شرح استخدام AnimatedPositioned في فلاتر“

الملاءمة (fit):

يمكن استخدام خاصية الملاءمة لتحديد كيفية تلائم الصورة داخل الحاوية. يمكنك تحديد ملاءمة الصورة باستخدام القيمة BoxFit. يتم تعيين القيمة الافتراضية لـ BoxFit.contain.

Image(
  image: AssetImage('assets/images/my_image.png'),
  fit: BoxFit.cover, // تغطية الحاوية بالصورة مع إبقاء نسبة العرض إلى الارتفاع ثابتة
),

العرض المسبق (loadingBuilder):

يمكن استخدام خاصية العرض المسبق لـ Image لإظهار صورة مؤقتة أثناء تحميل الصورة الفعلية. يمكنك إنشاء عرض مخصص باستخدام ويدجت Placeholder.

Image(
  image: AssetImage('assets/images/my_image.png'),
  loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
    if (loadingProgress == null)
      return child;
    return Center(
      child: CircularProgressIndicator(
        value: loadingProgress.expectedTotalBytes != null
            ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
            : null,
      ),
    );
  },
),

التكرار (repeat):

يمكنك استخدام خاصية التكرار لتكرار الصورة في العرض. والقيمة الافتراضية هي ImageRepeat.noRepeat.

Image(
  image: AssetImage('assets/images/my_image.png'),
  repeat: ImageRepeat.repeat, // تكرار الصورة في العرض
),

اللون (color) وطبقة اللون (colorBlendMode):

يمكنك استخدام خاصية اللون لتحديد لون محدد للصورة، ويمكنك استخدام خاصية طبقة اللون لتحديد وضع اللون على الصورة. والقيمة الافتراضية لـ اللون null وطبقة اللون BlendMode.srcIn.

Image(
  image: AssetImage('assets/images/my_image.png'),
  color: Colors.blue, // لون الصورة
  colorBlendMode: BlendMode.colorBurn, // طبقة اللون
),

التنقل (alignment):

يمكنك استخدام خاصية التنقل لتحديد موقع الصورة داخل الحاوية. والقيمة الافتراضية هي Alignment.center.

Image(
  image: AssetImage('assets/images/my_image.png'),
  alignment: Alignment.topRight, // موقع الصورة داخل الحاوية
),

“اقرأ أيضاً: شرح استخدام ويدجت Visibility في فلاتر“

باستخدام خاصيات Image المختلفة، يمكنك تحديد كيفية عرض الصور داخل تطبيق Flutter الخاص بك. سواء كانت الصور محلية أو عبر الإنترنت، يمكنك تحميلها وعرضها بأسلوب يناسب تطبيقك. يمكن استخدام هذا الدليل كمرجع لتحديد الخصائص المناسبة لصورتك داخل تطبيق Flutter الخاص بك.