💙 مرجع ويدجتس Flutter بالعربي

Container

الحاوية الأساسية

Container ويدجت متعدّد الأغراض: يضبط الحجم واللون والحواف والحشو والزخرفة لأي عنصر يحتويه.

Row

ترتيب أفقي

Row يرتّب مجموعة ويدجتس بجانب بعضها أفقيًا، مع تحكّم كامل بالمحاذاة والمسافات.

Column

ترتيب عمودي

Column يرتّب مجموعة ويدجتس فوق بعضها عموديًا — نفس مبدأ Row لكن بالاتجاه العمودي.

Stack

التراكب (وضع فوق بعض)

Stack يضع ويدجتس فوق بعضها البعض (تراكب طبقات) بدل ترتيبها بخط — مثالي للشارات فوق الصور أو التصاميم المتراكبة.

Padding

المسافة الداخلية

Padding يضيف مسافة فارغة حول ويدجت واحد — بديل مخصّص عن استخدام Container فقط من أجل الحشو.

Center

التوسيط

Center يوسّط ويدجتًا واحدًا داخل المساحة المتاحة له، أفقيًا وعموديًا معًا.

SizedBox

مساحة أو حجم ثابت

SizedBox يفرض حجمًا محددًا (عرض/ارتفاع) على ابنه، أو يُستخدم بلا ابن كمسافة فارغة بسيطة بين عناصر.

Expanded

توزيع المساحة المتبقية

Expanded يجعل ابنًا داخل Row أو Column يأخذ كل المساحة المتبقية المتاحة — الحل القياسي لمشكلة overflow.

SafeArea

تفادي تداخل عناصر النظام

SafeArea يضيف حشوًا تلقائيًا يمنع محتوى الشاشة من التداخل مع عناصر نظام التشغيل — شريط الحالة، النوتش، شريط التنقّل السفلي.

Wrap

ترتيب يلتف تلقائيًا لسطر جديد

Wrap يرتّب عناصره أفقيًا مثل Row، لكن ينتقل تلقائيًا لسطر جديد بدل التسبّب بـ overflow عند نفاد المساحة.

Text

عرض النصوص

Text يعرض سطرًا أو فقرة نصية، مع تحكّم كامل بالخط والحجم واللون والمحاذاة عبر TextStyle.

ElevatedButton

زر بارز

ElevatedButton زر بخلفية معبّأة وظل بسيط — الخيار القياسي للأفعال الرئيسية بالشاشة.

TextButton

زر نصي بسيط

TextButton زر بلا خلفية أو ظل — للأفعال الثانوية (مثل "إلغاء" بجانب زر رئيسي).

IconButton

زر أيقونة

IconButton زر دائري يعرض أيقونة فقط بلا نص — شائع بأشرطة الأدوات (AppBar) وقوائم العناصر.

Icon

عرض أيقونة

Icon يعرض رمزًا بصريًا من مكتبة Material Icons المدمجة أو أيقونات مخصّصة.

TextField

حقل إدخال نصي

TextField يتيح للمستخدم كتابة نص — الأداة الأساسية لأي نموذج (تسجيل دخول، بحث، تعليق).

Checkbox

مربّع اختيار

Checkbox عنصر تفعيل/إلغاء بسيط (صح/خطأ) — يحتاج قيمة value وحالة تُدار عادة عبر StatefulWidget أو BLoC/Cubit.

Switch

مفتاح تبديل

Switch مفتاح تشغيل/إيقاف بصري (مثل مفاتيح الإعدادات) — نفس مبدأ Checkbox لكن بشكل مختلف.

Form

تجميع حقول الإدخال والتحقّق

Form يجمع عدّة TextFormField أو حقول أخرى تحت مفتاح واحد، ليتحقّق منها جميعًا ويحفظها بأمر واحد.

TextFormField

حقل إدخال مع تحقّق مدمج

TextFormField نسخة من TextField مصمَّمة للعمل داخل Form — تضيف معامل validator للتحقّق التلقائي من صحة القيمة.

DropdownButton

قائمة منسدلة للاختيار

DropdownButton يعرض قائمة خيارات منسدلة، يختار المستخدم منها قيمة واحدة تظهر بدل الزر بعد الاختيار.

Radio

زر اختيار واحد من مجموعة

Radio يتيح اختيار قيمة واحدة فقط من مجموعة خيارات متبادلة الاستبعاد — بالنمط الحديث يُستخدم دائمًا داخل RadioGroup أب يدير الحالة مركزيًا.

ListView

قائمة قابلة للتمرير

ListView يعرض عناصر مرتّبة عموديًا (أو أفقيًا) مع تمرير تلقائي — الأداة الأساسية لأي قائمة طويلة.

GridView

شبكة عناصر

GridView يعرض عناصر بشبكة أعمدة وصفوف — مثالي لمعارض الصور أو قوائم المنتجات.

Card

بطاقة مرتفعة

Card صندوق بزوايا دائرية وظل خفيف افتراضيًا — تصميم Material القياسي لتجميع محتوى متعلّق ببعضه.

ListTile

سطر قائمة جاهز

ListTile تصميم سطر جاهز بأيقونة بادئة (leading) وعنوان وعنوان فرعي وأيقونة لاحقة (trailing) — النمط القياسي لعناصر القوائم.

Scaffold

هيكل الشاشة الأساسي

Scaffold يوفّر هيكل صفحة Material قياسي جاهز: شريط علوي، جسم، شريط سفلي، وزر عائم — كل شاشة تقريبًا تبدأ بـ Scaffold.

AppBar

الشريط العلوي

AppBar الشريط العلوي القياسي — يحتوي عنوان الشاشة، زر رجوع تلقائي، وأيقونات إجراءات (actions).

FloatingActionButton

الزر العائم

FloatingActionButton زر دائري عائم فوق المحتوى، عادة بأسفل الشاشة، يبرز الفعل الرئيسي بالشاشة (إضافة عنصر جديد غالبًا).

Drawer

قائمة جانبية منزلقة

Drawer قائمة جانبية تنزلق من حافة الشاشة — تحتوي عادة روابط التنقّل الرئيسية للتطبيق.

NavigationBar

شريط تنقّل سفلي (Material 3)

NavigationBar شريط تنقّل سفلي بتصميم Material 3 — يبدّل بين شاشات رئيسية قليلة (2-5 عادة) بضغطة واحدة.

Image

عرض الصور

Image يعرض صورة من الشبكة أو الأصول المحلية أو الذاكرة، بثلاثة مُنشِئات مختلفة حسب المصدر.

CircularProgressIndicator

مؤشّر تحميل دائري

CircularProgressIndicator يعرض دائرة تحميل متحرّكة — الإشارة القياسية لعملية جارية (تحميل بيانات، رفع ملف).

SnackBar

رسالة سريعة أسفل الشاشة

SnackBar رسالة قصيرة تظهر أسفل الشاشة وتختفي تلقائيًا — لتأكيد فعل (تم الحفظ، تم الحذف) بلا مقاطعة المستخدم.

AlertDialog

نافذة تنبيه منبثقة

AlertDialog نافذة منبثقة تحجب باقي الشاشة، تُستخدم لتأكيد فعل حسّاس (حذف، خروج بلا حفظ) أو عرض رسالة مهمة.

GestureDetector

التقاط إيماءات اللمس

GestureDetector يجعل أي ويدجت (حتى لو لا يستجيب للضغط أصلًا) قابلًا للتفاعل — نقرة، نقرتان، ضغط طويل.

FutureBuilder

عرض نتيجة Future تلقائيًا

FutureBuilder يبني الواجهة تلقائيًا حسب حالة Future — انتظار، نجاح، أو خطأ — بلا حاجة لإدارة الحالة يدويًا.

StreamBuilder

عرض تدفّق بيانات مستمر

StreamBuilder مثل FutureBuilder لكن لتدفّق بيانات مستمر يصدر أكثر من قيمة بمرور الوقت — بيانات حيّة من Firestore أو WebSocket.