switch – claudSoft

📌 ما هو الـ Switch؟

هو ويدجت (Widget) في Flutter تمثل زر تبديل (On / Off)، يُستخدم لتغيير حالة منطقية (true أو false).
تراه عادةً في الإعدادات لتفعيل أو تعطيل خيار.

🔹 البنية الأساسية (Constructor)

Switch(
  value: isOn,            // الحالة الحالية (true أو false)
  onChanged: (bool value) {
    setState(() {
      isOn = value;       // تحديث الحالة عند التغيير
    });
  },
)

Switch(
  value: isOn,            // الحالة الحالية (true أو false)
  onChanged: (bool value) {
    setState(() {
      isOn = value;       // تحديث الحالة عند التغيير
    });
  },
)

Dart

⚙️ أهم الخصائص

الخاصية	النوع	الوصف
`value`	`bool`	الحالة الحالية للمفتاح (`true` = مفعّل، `false` = غير مفعّل)
`onChanged`	`ValueChanged<bool>`	الدالة التي تُنفذ عند تغيير الحالة
`activeColor`	`Color`	لون المقبض (Thumb) عند التفعيل
`activeTrackColor`	`Color`	لون المسار (Track) عند التفعيل
`inactiveThumbColor`	`Color`	لون المقبض عند التعطيل
`inactiveTrackColor`	`Color`	لون المسار عند التعطيل
`activeThumbImage`	`ImageProvider`	صورة على المقبض عند التفعيل
`inactiveThumbImage`	`ImageProvider`	صورة على المقبض عند التعطيل
`focusColor`	`Color`	لون التأثير عند التركيز (Focus)
`hoverColor`	`Color`	لون التأثير عند المرور بالماوس (Hover)
`materialTapTargetSize`	`MaterialTapTargetSize`	حجم منطقة النقر (افتراضي أو صغير)
`mouseCursor`	`MouseCursor`	شكل مؤشر الماوس عند المرور فوقه

🖼 مثال بسيط:

bool isOn = false;

Switch(
  value: isOn,
  onChanged: (value) {
    setState(() {
      isOn = value;
    });
  },
  activeColor: Colors.green,
  activeTrackColor: Colors.green.shade200,
  inactiveThumbColor: Colors.red,
  inactiveTrackColor: Colors.red.shade200,
)

bool isOn = false;

Switch(
  value: isOn,
  onChanged: (value) {
    setState(() {
      isOn = value;
    });
  },
  activeColor: Colors.green,
  activeTrackColor: Colors.green.shade200,
  inactiveThumbColor: Colors.red,
  inactiveTrackColor: Colors.red.shade200,
)

Dart

🎨 تخصيص شكل الـ Switch

Switch(
  value: isOn,
  onChanged: (value) => setState(() => isOn = value),
  activeColor: Colors.white,
  activeTrackColor: Colors.blue,
  inactiveThumbColor: Colors.grey.shade200,
  inactiveTrackColor: Colors.grey.shade400,
  activeThumbImage: AssetImage('assets/on_icon.png'),
  inactiveThumbImage: AssetImage('assets/off_icon.png'),
)

Switch(
  value: isOn,
  onChanged: (value) => setState(() => isOn = value),
  activeColor: Colors.white,
  activeTrackColor: Colors.blue,
  inactiveThumbColor: Colors.grey.shade200,
  inactiveTrackColor: Colors.grey.shade400,
  activeThumbImage: AssetImage('assets/on_icon.png'),
  inactiveThumbImage: AssetImage('assets/off_icon.png'),
)

Dart

هنا أضفنا صور للمقبض بدل اللون فقط.

📱 استخدامه داخل ListTile (شكل أنيق في الإعدادات)

ListTile(
  title: Text('تفعيل الإشعارات'),
  trailing: Switch(
    value: isOn,
    onChanged: (value) => setState(() => isOn = value),
  ),
)

ListTile(
  title: Text('تفعيل الإشعارات'),
  trailing: Switch(
    value: isOn,
    onChanged: (value) => setState(() => isOn = value),
  ),
)

Dart

📝 ملاحظات ونصائح

لا تنسَ ربطه بـ setState إذا كنت داخل StatefulWidget حتى يتم تحديث الواجهة.
يمكن تعطيل الـ Switch بجعل onChanged: null.
عند تصميم تطبيق كبير، يفضل ربطه مع Provider أو Bloc بدلاً من setState.
إذا أردت تحكم أكبر في الشكل، هناك ويدجت أخرى مثل Switch.adaptive ليتغير شكلها حسب النظام (iOS/Android).