لماذا هذا القسم مهم؟

أي تطبيق تفاعلي تقريبًا يحتاج استقبال بيانات من المستخدم: تسجيل الدخول، كتابة تعليق، اختيار إعداد…
هنا يجي دور Widgets الإدخال (Input Widgets) اللي يوفرها Flutter عبر Material Design.

1. TextField

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

TextField(
  decoration: InputDecoration(
    labelText: 'اسم المستخدم',
    border: OutlineInputBorder(),
  ),
)

• labelText: نص وصفي يظهر داخل الحقل.
• border: لتحديد شكل الإطار.
• يمكن إضافة أيقونات:

TextField(
  decoration: InputDecoration(
    labelText: 'كلمة المرور',
    prefixIcon: Icon(Icons.lock),
    suffixIcon: Icon(Icons.visibility),
  ),
  obscureText: true, // إخفاء النص (مفيد لكلمات المرور)
)

2. Checkbox

مربع اختيار يسمح للمستخدم بتحديد خيار صح/خطأ.

Checkbox(
  value: true,
  onChanged: (bool? value) {},
)

عادةً يُستخدم داخل ListTile:

CheckboxListTile(
  title: Text('تفعيل الإشعارات'),
  value: false,
  onChanged: (bool? value) {},
)

3. Switch

زر تفعيل/تعطيل (تشبه مفاتيح الهاتف).

Switch(
  value: true,
  onChanged: (bool value) {},
)

• يستخدم لتفعيل/إلغاء ميزة معينة.
• مثلاً: تفعيل الوضع الليلي.

4. Radio

لاختيار خيار واحد فقط من عدة خيارات.

int? _selected = 1;

Radio<int>(
  value: 1,
  groupValue: _selected,
  onChanged: (int? value) {
    // تحديث القيمة المختارة
  },
)

عادةً تُستخدم مع ListTile:

RadioListTile<int>(
  title: Text('الخيار الأول'),
  value: 1,
  groupValue: _selected,
  onChanged: (int? value) {},
)

5. DropdownButton

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

DropdownButton<String>(
  value: 'عربي',
  items: ['عربي', 'إنجليزي', 'فرنسي']
      .map((lang) => DropdownMenuItem(
            value: lang,
            child: Text(lang),
          ))
      .toList(),
  onChanged: (String? newValue) {},
)

6. Slider

مؤشر منزلق لاختيار قيمة رقمية من مدى محدد.

Slider(
  value: 50,
  min: 0,
  max: 100,
  onChanged: (double value) {},
)

مفيد لاختيار مستوى الصوت، السطوع، أو أي قيمة نسبية.

7. DatePicker & TimePicker

لإدخال التاريخ والوقت بسهولة.

showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2020),
  lastDate: DateTime(2030),
);

showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
);

الخلاصة

• TextField: إدخال النصوص.
• Checkbox: تحديد نعم/لا (متعدد).
• Switch: تفعيل/تعطيل ميزة.
• Radio: اختيار وحيد من مجموعة.
• DropdownButton: اختيار من قائمة منسدلة.
• Slider: اختيار قيمة من مدى.
• Pickers: لاختيار التاريخ والوقت.