سلسلة عناصر ( ودجات ) فلاتر

مقدمة :

تعتبر الصور والأيقونات من أكثر العناصر استخداماً في التطبيقات , حيث يعتبر العنصر البصري عنصراً أساسياً في تجربة المستخدم وتصميم الواجهات ,
تتيح لك فلاتر إضافة الصور والأيقونات بأسلوب سهل وبسيط سنتعرف عليه من خلال المقال التالي :

الأيقونات :
توفر لك فلاتر من خلال Material مكتبة كبيرة من الأيقونات الجاهزة ضمن عدة أنواع ( العادي , والمفرّغ outlined و الحاد sharp )

تضمين الأيقونات :

تعتبر الأيقونات عنصراً Widget كأي عنصر من عناصر فلاتر ( يمكنك تضمينها في أي مكان ضمن شجرة العناصر ) و أشهر الأماكن التي تستخدم فيها الأيقونات هي ضمن
( البار العلوي AppBar , البار السفلي BottomNavigationBar , القائمة الجانبية Drawer )

خصائص الأيقونات :


Icon(
      Icons.audiotrack,
      color: Colors.green,
      size: 30.0,
    ),

color : لون الأيقونة و تأخذ قيمة لون Color مثال (Colors.red)
size : قياس الأيقونة وتأخذ قيمة double

تضمين الصور Image Widget :

للصور عدة انواع منها :
النوع asset لاستخدام صورة محلية من ملفات التطبيق تعرف مسبقاً في ملف pubspec.yaml
و النوع network لاستخدام صورة من الانترنت ( رابط صورة )
والنوع file وهو ملف موجود في الهاتف ليس من ملفات التطبيق

يتم استخدام الصور كأي Widget باستخدام كلاس Image أو ضمن خصائص الستايل decoration الخاص بال container ضمن كلاس (ImageProvider )

1 - الصور المحلية asset ( ملفات التطبيق ) :

يتم تعريفها أولاً ضمن ملف pubspec.yaml بالشكل التالي :

  
flutter:
  assets:
    - assets/background.png

ومن ثم تضمينها مع استدعاء المسار :

  
Image.asset('assets/background.png')
//أو بالشكل التالي
Image(image: AssetImage('assets/background.png'))

2 - الصور الخارجية network :

يتم استدعاؤها بشكل مباشر عبر وضع رابط الصورة ضمن خصائصها

  
Image.network('https://husam-hammad.com/images/husam-logo-white.png')
//أو بالشكل التالي
Image(image: NetworkImage('https://husam-hammad.com/images/husam-logo-white.png'))

3 - الصور المستدعاة من ملف داخل الهاتف ( ليس من ملفات التطبيق ) file

خصائص الصور :
سنتناول أبرز خصائص الصور ويمكنك الإطلاع على كامل الخصائص عبر الرابط أسفل المقال :

• width : قياس عرض الصورة ويأخذ قيمة double
• height : قياس ارتفاع الصورة ويأخذ قيمة double
• fit : ملائمة الصورة ضمن الحاوية وتأخذ قيمة BoxFit وهو من نوع enum وله العديد من الأنواع , وأهمها :

BoxFit.fill تعديل قياس الصورة طولاً وعرضاً لملئ المساحة الموضوعة بداخلها
BoxFit.cover تغطية الصورة للمساحة الموضوعة داخلها دون أي تعديل على المقاس
BoxFit.contain تعديل قياس الصورة بشكل نسبي بالطول والعرض معاً .
BoxFit.none عدم التعديل على المقاس .

•alignment : محاذاة الصورة ضمن الحاوية وتأخذ قيمة كلاس AlignmentGeometry كمثال ( Alignment.center )
• filterQuality : دقة الصورة وتأخذ قيمة FilterQuality وهو من نوع enum , كمثال (FilterQuality.low)