DropdownButton

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

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

value يحدّد الخيار المعروض حاليًا، وitems قائمة DropdownMenuItem لكل خيار ممكن. مثل باقي عناصر الإدخال، لا يحفظ حالته بنفسه — يعتمد على onChanged لتحديث value بمكان آخر.

الصياغة

DropdownButton<T>(
  value: T?,
  items: List<DropdownMenuItem<T>>,
  onChanged: (T? value) { },
)

📄 مثال

String selected = 'الرياض';

DropdownButton<String>(
  value: selected,
  items: ['الرياض', 'جدة', 'الدمام']
      .map((city) => DropdownMenuItem(value: city, child: Text(city)))
      .toList(),
  onChanged: (value) => setState(() => selected = value!),
)

أهم المعاملات

المعامل	الوظيفة
value	الخيار المعروض حاليًا — يجب أن يطابق قيمة أحد items تمامًا
items	قائمة DropdownMenuItem، كل واحد بقيمة (value) وويدجت عرض (child)
onChanged	يُستدعى بالقيمة الجديدة عند اختيار المستخدم لخيار

💡 نصائح عملية

بتطبيقات Material 3 الحديثة، فكّر أيضًا بـ DropdownMenu — بديل أحدث بمظهر حقل نصي ودعم بحث مدمج

⚠️ أخطاء شائعة

تمرير value لا يطابق أي عنصر بقائمة items بنفس النوع تمامًا (==) — يرمي خطأ وقت التشغيل

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار FLUTTER الكامل بالعربي.