Checkbox – claudSoft

📌 ما هو الـ Checkbox؟

هو ويدجت (Widget) في Flutter يمثل مربع اختيار يمكن أن يكون:

محدد ✅ (true)
غير محدد ⬜ (false)
أو شبه محدد (indeterminate) إذا استخدمت tristate: true.

يُستخدم لتفعيل أو إلغاء تفعيل خيار معيّن، أو تحديد عناصر متعددة.

🔹 البنية الأساسية

Checkbox(
  value: isChecked,          // الحالة الحالية (true / false / null إذا tristate)
  onChanged: (bool? value) { // ماذا يحدث عند التغيير
    setState(() {
      isChecked = value!;
    });
  },
)

Checkbox(
  value: isChecked,          // الحالة الحالية (true / false / null إذا tristate)
  onChanged: (bool? value) { // ماذا يحدث عند التغيير
    setState(() {
      isChecked = value!;
    });
  },
)

Dart

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

الخاصية	النوع	الوصف
`value`	`bool?`	الحالة الحالية للمربع (`true`, `false`, أو `null` مع `tristate`)
`onChanged`	`ValueChanged<bool?>?`	الدالة التي تنفذ عند الضغط
`activeColor`	`Color?`	لون المربع عند التحديد
`checkColor`	`Color?`	لون علامة الصح داخل المربع
`fillColor`	`MaterialStateProperty<Color?>?`	طريقة حديثة لتحديد ألوان المربع حسب الحالة
`focusColor`	`Color?`	لون التأثير عند التركيز (Focus)
`hoverColor`	`Color?`	لون التأثير عند مرور الماوس
`overlayColor`	`MaterialStateProperty<Color?>?`	لون التغطية عند التفاعل
`splashRadius`	`double?`	نصف قطر تأثير النقر
`materialTapTargetSize`	`MaterialTapTargetSize?`	حجم منطقة النقر (افتراضي أو صغير)
`tristate`	`bool`	إذا كان المربع يدعم الحالة الثالثة (null)

🖼 مثال بسيط

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("مثال على Checkbox")),
        body: Center(
          child: Checkbox(
            value: isChecked,
            onChanged: (bool? value) {
              setState(() {
                isChecked = value!;
              });
            },
            activeColor: Colors.green, // لون المربع عند التحديد
            checkColor: Colors.white,  // لون الصح
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("مثال على Checkbox")),
        body: Center(
          child: Checkbox(
            value: isChecked,
            onChanged: (bool? value) {
              setState(() {
                isChecked = value!;
              });
            },
            activeColor: Colors.green, // لون المربع عند التحديد
            checkColor: Colors.white,  // لون الصح
          ),
        ),
      ),
    );
  }
}

Dart

📝 نصائح

Checkbox لوحده يعطيك فقط المربع، إذا أردت نص بجانبه استخدم CheckboxListTile.
إذا أردت أكثر من خيار يمكن تحديدهم معًا، استخدم قائمة من Checkbox أو CheckboxListTile.
لتخصيص الشكل أكثر، استعمل fillColor مع MaterialStateProperty لتغيير اللون حسب حالة المربع (محدد، معطل، Hover…).

📌 ما هو `CheckboxListTile`؟

هو ويدجت جاهزة تعرض:

Checkbox (مربع اختيار).
عنوان (title).
وصف فرعي (subtitle) اختياري.
أيقونة أو صورة جانبية (secondary) اختيارية.
مع إمكانية النقر على أي مكان في الصف لتغيير الحالة، مش بس المربع.

🔹 البنية الأساسية

CheckboxListTile(
  value: ... ,        // الحالة الحالية (true / false)
  onChanged: ... ,    // ماذا يحدث عند التغيير
  title: ... ,        // العنوان
  subtitle: ... ,     // وصف فرعي (اختياري)
  secondary: ... ,    // أيقونة أو صورة (اختياري)
)

CheckboxListTile(
  value: ... ,        // الحالة الحالية (true / false)
  onChanged: ... ,    // ماذا يحدث عند التغيير
  title: ... ,        // العنوان
  subtitle: ... ,     // وصف فرعي (اختياري)
  secondary: ... ,    // أيقونة أو صورة (اختياري)
)

Dart

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

الخاصية	النوع	الوصف
`value`	`bool?`	الحالة الحالية للمربع
`onChanged`	`ValueChanged<bool?>?`	الدالة التي تنفذ عند النقر
`title`	`Widget`	العنوان الرئيسي
`subtitle`	`Widget?`	نص فرعي أسفل العنوان
`secondary`	`Widget?`	ويدجت على الجهة الأخرى (مثل أيقونة)
`isThreeLine`	`bool`	إذا كان لديك عنوان + سطرين نصوص
`dense`	`bool?`	لتقليل المسافات
`contentPadding`	`EdgeInsetsGeometry?`	مسافة داخلية حول المحتوى
`activeColor`	`Color?`	لون المربع عند التحديد
`checkColor`	`Color?`	لون الصح داخل المربع
`fillColor`	`MaterialStateProperty<Color?>?`	تحديد لون المربع حسب الحالة
`tileColor`	`Color?`	لون خلفية الصف
`selectedTileColor`	`Color?`	لون الخلفية عند التحديد
`selected`	`bool`	لتغيير مظهر النص إذا كان محدد
`controlAffinity`	`ListTileControlAffinity`	موقع المربع (leading أو trailing أو platform default)
`autofocus`	`bool`	إذا كان المربع يحصل على التركيز تلقائيًا
`tristate`	`bool`	إذا أردت 3 حالات (true / false / null)

🖼 مثال بسيط

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("مثال على CheckboxListTile")),
        body: CheckboxListTile(
          title: Text("تفعيل الإشعارات"),
          subtitle: Text("ستصلك تنبيهات عند وجود جديد"),
          secondary: Icon(Icons.notifications),
          value: isChecked,
          onChanged: (bool? value) {
            setState(() {
              isChecked = value!;
            });
          },
          activeColor: Colors.green, // لون المربع عند التحديد
          checkColor: Colors.white,  // لون الصح
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("مثال على CheckboxListTile")),
        body: CheckboxListTile(
          title: Text("تفعيل الإشعارات"),
          subtitle: Text("ستصلك تنبيهات عند وجود جديد"),
          secondary: Icon(Icons.notifications),
          value: isChecked,
          onChanged: (bool? value) {
            setState(() {
              isChecked = value!;
            });
          },
          activeColor: Colors.green, // لون المربع عند التحديد
          checkColor: Colors.white,  // لون الصح
        ),
      ),
    );
  }
}

Dart

📱 استخداماته الشائعة

إعدادات التطبيق (مثل تشغيل/إيقاف المزايا).
اختيار عناصر متعددة من قائمة خيارات.
تفعيل أو إلغاء تفعيل ميزة معينة بشكل واضح.

📌 ما هو الـ Checkbox؟

🔹 البنية الأساسية

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

🖼 مثال بسيط

📝 نصائح

📌 ما هو CheckboxListTile؟

🔹 البنية الأساسية

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

🖼 مثال بسيط

📱 استخداماته الشائعة

📌 ما هو `CheckboxListTile`؟