MaterialButton – claudSoft

📌 ما هو MaterialButton؟

MaterialButton هو زر أساسي (Base Class) في Flutter يعتمد على تصميم Material Design.
كل الأزرار الأخرى مثل:

ElevatedButton
TextButton
OutlinedButton

مبنية عليه أو تستخدم نفس مبدأه، لكن MaterialButton نفسه يعطيك مرونة أكبر لأنه شبه خام (Raw) وتتحكم في شكله وسلوكه بنفسك.

🛠 البنية العامة

MaterialButton(
  onPressed: () {},          // الحدث عند الضغط
  onLongPress: () {},        // الحدث عند الضغط المطوّل
  color: Colors.blue,        // لون خلفية الزر
  textColor: Colors.white,   // لون النص أو الأيقونة
  splashColor: Colors.yellow,// لون موجة الضغط
  elevation: 4.0,            // الظل (الارتفاع)
  highlightElevation: 8.0,   // الظل عند الضغط
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12), // شكل الحواف
  ),
  padding: EdgeInsets.all(16), // المسافات الداخلية
  child: Text('اضغط هنا'),
);

MaterialButton(
  onPressed: () {},          // الحدث عند الضغط
  onLongPress: () {},        // الحدث عند الضغط المطوّل
  color: Colors.blue,        // لون خلفية الزر
  textColor: Colors.white,   // لون النص أو الأيقونة
  splashColor: Colors.yellow,// لون موجة الضغط
  elevation: 4.0,            // الظل (الارتفاع)
  highlightElevation: 8.0,   // الظل عند الضغط
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12), // شكل الحواف
  ),
  padding: EdgeInsets.all(16), // المسافات الداخلية
  child: Text('اضغط هنا'),
);

Dart

📋 أهم الخصائص

الخاصية	النوع	الوصف
onPressed	`VoidCallback?`	الدالة التي تنفذ عند الضغط (إلزامية لتفعيل الزر)
onLongPress	`VoidCallback?`	تنفذ عند الضغط المطول
color	`Color?`	لون خلفية الزر
textColor	`Color?`	لون النصوص والأيقونات
disabledColor	`Color?`	لون الزر عند التعطيل (`onPressed = null`)
disabledTextColor	`Color?`	لون النص عند التعطيل
splashColor	`Color?`	لون تأثير الموجة عند الضغط
highlightColor	`Color?`	لون تظليل الزر أثناء الضغط المستمر
elevation	`double`	الظل في الوضع الطبيعي
highlightElevation	`double`	الظل عند الضغط
focusElevation	`double`	الظل عند التركيز (Focus)
hoverElevation	`double`	الظل عند تمرير المؤشر (في الويب/السطح)
minWidth	`double`	أقل عرض للزر
height	`double`	ارتفاع الزر
shape	`ShapeBorder`	شكل حدود الزر (مستطيل، دائري، إلخ)
padding	`EdgeInsetsGeometry`	المسافات الداخلية للمحتوى
child	`Widget`	محتوى الزر (نص، أيقونة، Row، إلخ)

🧩 أمثلة عملية

1️⃣ زر بسيط

MaterialButton(
  onPressed: () {
    print("تم الضغط");
  },
  color: Colors.blue,
  textColor: Colors.white,
  child: Text("اضغط هنا"),
);

MaterialButton(
  onPressed: () {
    print("تم الضغط");
  },
  color: Colors.blue,
  textColor: Colors.white,
  child: Text("اضغط هنا"),
);

Dart

2️⃣ زر بأيقونة ونص

MaterialButton(
  onPressed: () {},
  color: Colors.green,
  textColor: Colors.white,
  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.send),
      SizedBox(width: 8),
      Text("إرسال"),
    ],
  ),
);

MaterialButton(
  onPressed: () {},
  color: Colors.green,
  textColor: Colors.white,
  padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.send),
      SizedBox(width: 8),
      Text("إرسال"),
    ],
  ),
);

Dart

3️⃣ زر مع تأثيرات الضغط

MaterialButton(
  onPressed: () {},
  color: Colors.purple,
  splashColor: Colors.yellow.withOpacity(0.3),
  highlightColor: Colors.red.withOpacity(0.2),
  elevation: 4,
  highlightElevation: 10,
  child: Text("تأثيرات الضغط"),
);

MaterialButton(
  onPressed: () {},
  color: Colors.purple,
  splashColor: Colors.yellow.withOpacity(0.3),
  highlightColor: Colors.red.withOpacity(0.2),
  elevation: 4,
  highlightElevation: 10,
  child: Text("تأثيرات الضغط"),
);

Dart

4️⃣ زر مع تعطيل

MaterialButton(
  onPressed: null, // تعطيل الزر
  color: Colors.grey,
  textColor: Colors.white,
  disabledColor: Colors.grey.shade400,
  disabledTextColor: Colors.black38,
  child: Text("زر معطل"),
);

MaterialButton(
  onPressed: null, // تعطيل الزر
  color: Colors.grey,
  textColor: Colors.white,
  disabledColor: Colors.grey.shade400,
  disabledTextColor: Colors.black38,
  child: Text("زر معطل"),
);

Dart

💡 نصائح عند استخدام MaterialButton

يفضل في المشاريع الحديثة استخدام الأزرار الجديدة (ElevatedButton, TextButton, OutlinedButton) إلا إذا كنت تحتاج تخصيصات كاملة.
لا تترك onPressed فارغًا، لأنه إذا كانت null سيتعطل الزر تلقائيًا.
استغل shape لتصميم زر دائري، بيضاوي أو مستطيل بحواف مستديرة.
splashColor و highlightColor يمكن دمجهم مع Theme لتوحيد ألوان التفاعل.
استخدم minWidth و height إذا أردت زرًا بمقاسات ثابتة.

📌 الفرق بينه وبين ElevatedButton

العنصر	MaterialButton	ElevatedButton
التصميم	أساسي وخام (Raw)	جاهز بأسلوب Material Design مرفوع
التخصيص	عالي جدًا (تتحكم في كل شيء)	تخصيص أقل (لكن كافي لمعظم الحالات)
سهولة الاستخدام	يحتاج كتابة خصائص كثيرة	أسهل وأسرع في الاستخدام
التوافق مع الأسلوب الحديث	أقل	أعلى (موصى به في Flutter الحديثة)