لماذا الأزرار مهمة؟

الأزرار هي وسيلة المستخدم للتفاعل مع التطبيق: تسجيل الدخول، مشاركة المحتوى، الانتقال إلى صفحة أخرى… إلخ.
جوجل في Material Design وضعت قواعد دقيقة للأزرار علشان تكون:

• واضحة (Clear).
• سهلة الضغط (Touchable).
• متناسقة مع التصميم العام.

الأنواع الأساسية للأزرار في Flutter (Material 3)

1. ElevatedButton

زر بارز بظل (Shadow) يُستخدم للأفعال الرئيسية في الشاشة.

ElevatedButton(
  onPressed: () {},
  child: Text('اضغط هنا'),
)

متى تستخدمه؟

• لو عندك إجراء أساسي (Primary Action) زي “تسجيل الدخول”.

2. FilledButton

زر ممتلئ بدون ظل، أبسط من ElevatedButton.

FilledButton(
  onPressed: () {},
  child: Text('متابعة'),
)

متى تستخدمه؟

• للإجراءات الثانوية لكن ما زالت مهمة.

3. OutlinedButton

زر بإطار فقط (Border)، بدون تعبئة.

OutlinedButton(
  onPressed: () {},
  child: Text('إلغاء'),
)

متى تستخدمه؟

• للإجراءات الأقل أهمية أو البديلة (Cancel – Secondary).

4. TextButton

زر نصي فقط بدون إطار أو تعبئة.

TextButton(
  onPressed: () {},
  child: Text('عرض المزيد'),
)

متى تستخدمه؟

• للإجراءات البسيطة، الروابط، أو الانتقالات داخل التطبيق.

5. IconButton

زر دائري يحتوي على أيقونة فقط.

IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {},
)

متى تستخدمه؟

• للأفعال السريعة مثل: إضافة إلى المفضلة، مشاركة، بحث.

6. FloatingActionButton (FAB)

زر دائري طائر فوق الشاشة، مخصص للإجراء الأكثر أهمية.

FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.add),
)

متى تستخدمه؟

• لإجراء رئيسي متكرر مثل: “إضافة عنصر جديد”.

تخصيص الأزرار

كل الأزرار قابلة للتخصيص عبر style:

ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.teal,
    foregroundColor: Colors.white,
    padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
  onPressed: () {},
  child: Text('مخصص'),
)

مقارنة سريعة بين الأنواع

إضافات متقدمة في الأزرار

1. FloatingActionButton.extended

عادةً زر FloatingActionButton (FAB) يكون دائري ويحتوي أيقونة فقط.
لكن أحيانًا تحتاج تعرض أيقونة + نص معًا في زر عائم، هنا يظهر دور FloatingActionButton.extended.

FloatingActionButton.extended(
  onPressed: () {},
  icon: Icon(Icons.add),
  label: Text('إضافة عنصر'),
)

مميزاته:

• يجمع بين الأيقونة والنص.
• أكثر وضوحًا للمستخدم، خصوصًا لو الأيقونة وحدها غير كافية.
• مناسب للتطبيقات اللي فيها زر عائم متعدد الوظائف (مثال: “إضافة منتج جديد”).

متى تستخدمه؟

• لو الإجراء الأساسي في التطبيق يحتاج وصف نصي بجانب الأيقونة.
• في الشاشات اللي فيها أكثر من زر تفاعلي، بحيث ما يضيع المستخدم.

2. SegmentedButton

تخيل عندك خيار فيه عدة بدائل، وتريد تخلي المستخدم يختار واحد منها أو أكثر (حسب الإعدادات).
الـ SegmentedButton هو زر مقسم إلى عدة أقسام، كل قسم يمثل خيارًا.

SegmentedButton<String>(
  segments: const <ButtonSegment<String>>[
    ButtonSegment(value: 'day', label: Text('يومي'), icon: Icon(Icons.calendar_view_day)),
    ButtonSegment(value: 'week', label: Text('أسبوعي'), icon: Icon(Icons.calendar_view_week)),
    ButtonSegment(value: 'month', label: Text('شهري'), icon: Icon(Icons.calendar_view_month)),
  ],
  selected: <String>{'day'},
  onSelectionChanged: (Set<String> newSelection) {
    print(newSelection);
  },
)

مميزاته:

• بديل أنيق للراديو (Radio) أو التبويبات (Tabs).
• يمكن أن يسمح باختيار خيار واحد فقط أو أكثر من خيار.
• يظهر بشكل مدمج ومتناسق مع Material Design 3.

متى تستخدمه؟

• لو عندك مجموعة خيارات مرتبطة (مثال: تصفية حسب “يومي – أسبوعي – شهري”).
• بديل أبسط وأوضح من القوائم المنسدلة أو الراديو الكلاسيكية.

الخلاصة

• الأزرار ليست مجرد شكل، بل لغة للتفاعل.
• Material Design يضمن إن كل نوع زر له وظيفة واضحة.
• Flutter يوفر أدوات قوية لتخصيص الأزرار بحيث تناسب هوية تطبيقك.