Icon Widget

ما هي ويدجت Icon؟

ويدجت Icon تُستخدم لعرض أيقونات (Icons) من مكتبة Flutter المدمجة أو من مكتبات خارجية (مثل Font Awesome).
هي عنصر رسومي فقط (لا تتفاعل لوحدها) لكن يمكن دمجها مع ويدجت أخرى مثل IconButton لجعلها قابلة للنقر.

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

Icon(
  Icons.home, // نوع الأيقونة
  size: 40,   // حجم الأيقونة
  color: Colors.blue, // اللون
)

Icon(
  Icons.home, // نوع الأيقونة
  size: 40,   // حجم الأيقونة
  color: Colors.blue, // اللون
)

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

مثال: أيقونة بسيطة

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

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

مثال: أيقونة مع ظل

Icon(
  Icons.favorite,
  color: Colors.red,
  size: 40,
  shadows: [
    Shadow(
      color: Colors.black45,
      blurRadius: 5,
      offset: Offset(2, 2),
    ),
  ],
)

Icon(
  Icons.favorite,
  color: Colors.red,
  size: 40,
  shadows: [
    Shadow(
      color: Colors.black45,
      blurRadius: 5,
      offset: Offset(2, 2),
    ),
  ],
)

استخدام الأيقونات داخل أزرار

الأيقونة نفسها لا يمكن الضغط عليها مباشرة، لكن يمكنك وضعها داخل:

• IconButton
• ElevatedButton.icon
• TextButton.icon
• FloatingActionButton

مثال:

IconButton(
  icon: Icon(Icons.settings, color: Colors.blue),
  onPressed: () {
    print("Settings clicked");
  },
)

IconButton(
  icon: Icon(Icons.settings, color: Colors.blue),
  onPressed: () {
    print("Settings clicked");
  },
)

مكتبات أيقونات خارجية

يمكنك استخدام مكتبات مثل:

• font_awesome_flutter
• material_design_icons_flutter

مثال:

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

Icon(FontAwesomeIcons.twitter, color: Colors.blue, size: 30);

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

Icon(FontAwesomeIcons.twitter, color: Colors.blue, size: 30);

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

• الأيقونات في Flutter تعتمد على Vector، لذا فهي لا تتأثر بجودة الشاشة عند التكبير.
• إذا أردت جعل الأيقونة جزء من النص، استخدم Icon داخل Row أو Text.rich.
• لتغيير حجم جميع الأيقونات مرة واحدة في التطبيق، يمكنك تعديل IconTheme.