FloatingActionButton

الزر العائم FloatingActionButton

FloatingActionButton زر دائري عائم فوق المحتوى، عادة بأسفل الشاشة، يبرز الفعل الرئيسي بالشاشة (إضافة عنصر جديد غالبًا).

يُمرَّر عادة عبر معامل floatingActionButton بـ Scaffold مباشرة، الذي يتولّى تموضعه تلقائيًا. استخدامه المتعارف عليه بتصميم Material لفعل واحد رئيسي فقط بكل شاشة.

الصياغة

FloatingActionButton(
  onPressed: () { },
  child: Icon(IconData),
)

📄 مثال

Scaffold(
  body: Center(child: Text('المحتوى')),
  floatingActionButton: FloatingActionButton(
    onPressed: () => print('إضافة عنصر'),
    tooltip: 'إضافة',
    child: Icon(Icons.add),
  ),
)

أهم المعاملات

المعامل	الوظيفة
onPressed	الدالة المُنفَّذة عند الضغط
child	عادة Icon واحد يعبّر عن الفعل (Icons.add شائع جدًا)
floatingActionButtonLocation	معامل بـ Scaffold يغيّر موضع الزر الافتراضي

💡 نصائح عملية

استخدم FloatingActionButton.extended إذا أردت نصًا بجانب الأيقونة بدل أيقونة فقط

⚠️ أخطاء شائعة

وضع أكثر من فعل رئيسي بزر عائم واحد — الأفضل فعل واضح ووحيد بكل شاشة

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار FLUTTER الكامل بالعربي.