انواع Widgets

تقسم بحسب عدة اهتمامات :
الاحتواء
الاستخدام
التركيب

انواع ال widgets من ناحية الاحتواء
1- نوع يحتوي على ابن واحد فقط.
2- نوع يحتوي على عدة ابناء.
3- نوع يحتوي على قيمة.

الابن عبارة عن Widget
القيم عبارة عن متغير مثل int , String , class .....other

المخطط يشرح تركيب واجهة تطبيق :

هناك انواع تحتوي على عدة ابناء مثل :
Column , Row

وانواع تحتوي على ابن واحد مثل :
Container

وانواع تحتوي على قيمة مثل :
Text , Icon

في الكود للمحاضرة السابقة توقفنا عند بناء الهيكل الاساسي للواجهة بواسطة الويدجت
Scaffold

اذا اردنا اضافة النص " الجسد" داخل مربع ذات لون احمر
نحتاج الى ويدجت الحاوية او ما يسمى Container

وضعنا ال Text بداخل Container

ومن خصائص ال Container يمكننا تغيير اللون

كما تلاحظ

هناك عدة طرق لأختيار اللون

اما بأستخدام الكلاس Colors ويحتوي على الكثير من الالوان المخزنة في مكاتب الفلاتر

او استخدام الكلاس Color وندخل القيمة السادس عشرية المقابلة للوان المراد اختياره

ايضاً يمكننا اختيار اللون من النافذة التي تظهر تلقائياً لدينا عند وضع المؤشر على منطقة قيمة اللون

ايضاً من خصائص ال Container اضافة الحاشية الداخلية " Padding " والخارجية "Margin "

يمكن اضافة الطول والعرض

عند عدم تحديد الطول والعرض يتم اعتماد الحجم الكافي لأحتواء الابن التابع لل Container

لنفرض اننا رغبنا بوضع المستطيل المحتوي على النص في منتصف الواجهة ؟؟؟

فقط نقوم بأضافة ال Container داخل widget يسمى Center

والذي يعني المركز او المنتصف

طبعاً لا نحتاج لقص كود ال Container ثم بناء Center واضافته كأبن له ...

هناك اوامر جاهزة من خلال وضع المؤشر على نص Container ثم الضغط على ايقونة اللمبة لأعطائك الكثير من الخيارات منها
Wrap with Center
والتي تعني احتواء بواسطة Center

الى الان لم نستخدم الا نوعين من الويدجت المذكورة بالاعلى والتي هي :

- التي تحتوي على ابن واحد فقط : Center , Container

- التي تحتوي على قيمة : Text

الان ننتقل الى التي تحتوي على عدة ابناء ومنها ثلاثة انواع كل نوع لدية عدة ويدجتس خاصة به :

- التي تتعامل بأتجاه المحور X مثل الصف Row
- التي تتعامل بأتجاه المحور Y مثل العمود Column
- التي تتعامل بأتجاه المحور Z مثل المكدس Stack

ناتع ...

بالاول نحول الكود الذي استخدمناه الى كلاس منفصل

اقصد Center ومحتواه

وذلك بطريقة سهلة