IconButton – claudSoft

ما هي IconButton؟

هي ويدجت تعرض أيقونة (من نوع Icon) لكنها قابلة للنقر (Clickable)، وتنفذ أكشن عند الضغط عليها.

الصيغة الأساسية

IconButton(
  icon: Icon(Icons.home),
  onPressed: () {
    print("تم الضغط على الأيقونة");
  },
)

IconButton(
  icon: Icon(Icons.home),
  onPressed: () {
    print("تم الضغط على الأيقونة");
  },
)

Dart

أهم الخصائص في IconButton

الخاصية	النوع	الوصف
`icon`	Widget	الأيقونة التي ستُعرض (عادةً `Icon`).
`onPressed`	VoidCallback?	الدالة التي تُنفذ عند الضغط (إذا كانت `null` تكون الأيقونة معطلة).
`iconSize`	double	حجم الأيقونة (افتراضي 24).
`color`	Color	لون الأيقونة.
`highlightColor`	Color	لون اللمعة عند النقر.
`splashColor`	Color	لون الموجة عند النقر (Ripple).
`tooltip`	String	نص يظهر كبالون صغير عند وضع المؤشر (في الويب/الديسكتوب).
`padding`	EdgeInsetsGeometry	المسافة حول الأيقونة داخل الزر.
`alignment`	Alignment	محاذاة الأيقونة داخل الزر.
`constraints`	BoxConstraints	لتعديل القياسات الافتراضية للزر.
`enableFeedback`	bool	تفعيل/تعطيل صوت أو اهتزاز عند النقر (حسب الجهاز).
`disabledColor`	Color	لون الأيقونة إذا كانت `onPressed` = null.
`style` (من Flutter 3.7+)	ButtonStyle	تخصيص مظهر الزر بالكامل.

مثال بسيط

IconButton(
  icon: Icon(Icons.search),
  color: Colors.blue,
  iconSize: 30,
  onPressed: () {
    print("بحث");
  },
)

IconButton(
  icon: Icon(Icons.search),
  color: Colors.blue,
  iconSize: 30,
  onPressed: () {
    print("بحث");
  },
)

Dart

مثال مع ألوان الـ Splash و Highlight

IconButton(
  icon: Icon(Icons.favorite),
  color: Colors.red,
  splashColor: Colors.pink.withOpacity(0.3),
  highlightColor: Colors.pink.withOpacity(0.1),
  onPressed: () {
    print("تم الإعجاب");
  },
)

IconButton(
  icon: Icon(Icons.favorite),
  color: Colors.red,
  splashColor: Colors.pink.withOpacity(0.3),
  highlightColor: Colors.pink.withOpacity(0.1),
  onPressed: () {
    print("تم الإعجاب");
  },
)

Dart

مثال مع Tooltip

IconButton(
  icon: Icon(Icons.settings),
  tooltip: "الإعدادات",
  onPressed: () {
    print("فتح الإعدادات");
  },
)

IconButton(
  icon: Icon(Icons.settings),
  tooltip: "الإعدادات",
  onPressed: () {
    print("فتح الإعدادات");
  },
)

Dart

تعطيل الزر

IconButton(
  icon: Icon(Icons.delete),
  onPressed: null, // معطّل
)

IconButton(
  icon: Icon(Icons.delete),
  onPressed: null, // معطّل
)

Dart

في هذه الحالة الأيقونة تظهر بلون disabledColor الافتراضي.

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

إذا تريد زر دائري بخلفية ملونة، استخدم FloatingActionButton بدل IconButton.
إذا تريد زر نص مع أيقونة، استخدم TextButton.icon أو ElevatedButton.icon.
IconButton ممتازة للتولبار، القوائم، وأي مكان تحتاج فيه أيقونة صغيرة قابلة للنقر.

هنا جدول المقارنة بين Icon و IconButton مع الشرح الكامل ومتى تختار كل واحد:

المعيار	Icon	IconButton
الوظيفة	عرض أيقونة ثابتة (غير تفاعلية).	عرض أيقونة قابلة للنقر مع حدث عند الضغط.
التفاعل	لا يمكن النقر عليها.	يمكن النقر عليها وتشغيل دالة عبر `onPressed`.
الخصائص الأساسية	`icon` (IconData)، `size`، `color`، `shadows`.	كل خصائص `Icon` تقريباً + خصائص تفاعل مثل `onPressed`, `tooltip`, `splashColor`.
الاستخدام داخل أزرار	تحتاج لفّها بـ Widget آخر مثل `GestureDetector` أو `InkWell` لجعلها قابلة للنقر.	جاهزة للتفاعل مباشرة بدون لفها بأي ويدجت إضافية.
متى تستخدمها؟	– لعرض أيقونات للتزيين أو كمؤشر. – في النصوص أو القوائم الثابتة.	– للأيقونات التي تمثل أوامر (بحث، حذف، إعدادات). – في AppBar، Toolbars، شريط القوائم.
الأداء	أخف من ناحية الأداء لأنها عنصر رسومي فقط.	أثقل قليلاً لأنها تتعامل مع التفاعل وتأثيرات اللمس.
الألوان والظلال	تعيين مباشر للون والظل.	تعيين مباشر للألوان + تحكم في تأثيرات الضغط (splash, highlight).
التعطيل	لا يوجد تعطيل، تظل دائماً بنفس الشكل.	يمكن تعطيلها بجعل `onPressed = null`.

مثال عملي سريع للفارق

Icon (ثابتة)

Icon(
  Icons.star,
  size: 40,
  color: Colors.amber,
)

Icon(
  Icons.star,
  size: 40,
  color: Colors.amber,
)

Dart

IconButton (تفاعلية)

IconButton(
  icon: Icon(Icons.star),
  color: Colors.amber,
  iconSize: 40,
  onPressed: () {
    print("ضغطت على النجمة");
  },
)

IconButton(
  icon: Icon(Icons.star),
  color: Colors.amber,
  iconSize: 40,
  onPressed: () {
    print("ضغطت على النجمة");
  },
)

Dart