تغيير لون الأزرار عند تمكين Material 3
مع Material 3 https://m3.material.io/develop/flutter في Flutter، أصبح تغيير ألوان الأزرار أسهل كثيرًا الآن. يحتوي كل زر على styleسمة تتيح لك تخصيص ألوانه باستخدام styleFromالوظيفة.
قبل المادة 3 styleكانت السمة متاحة بالفعل، ومع ذلك فإن بعض الأزرار لم تحترم الألوان المحددة داخل السمة.
دالة StyleFrom
كل زر له وظيفته الخاصة styleFrom، ولكن معظمها تشترك في نفس سمات اللون. تستخدم الأزرار علامة ButtonStyleلضبط مظهرها الافتراضي، والذي يأتي عادةً من علامة التبويب ThemeData.colorSchemeو في التطبيق ThemeData.textTheme. باستخدام styleFromالوظيفة، يمكنك بسهولة تجاوز هذه الأنماط.
يمكن تخصيص السمات التالية للأزرار (ما لم يتم الإشارة إلى خلاف ذلك) باستخدام الوظيفة styleFrom.
1-backgroundColor : يحدد لون خلفية الزر.
2-disabledBackgroundColor : لون الخلفية عندما يتم تعطيل الزر.
3-disabledForegroundColor : لون النص والأيقونات عندما يكون الزر معطلاً.
4-disabledIconColor : لون الأيقونة عندما يكون الزر معطلاً.
5-foregroundColor : يحدد لون نص الزر والأيقونات عند تمكينه.
6-iconColor : لون الأيقونات الموجودة داخل الزر عند تمكينه.
7-overlayColor : لون التراكب الذي يظهر عند الضغط على الزر أو تحريك المؤشر فوقه.
8-shadowColor : لون ظل الزر، مما يضيف عمقًا إلى مظهره.
9-surfaceTintColor : الصبغة المطبقة على سطح الزر، وتعديل نغمته العامة.
ElevatedButtonتم زيادة حجم باستخدام Transform.scale، لأغراض العرض فقط.
كما ذكرنا سابقًا، لكل زر وظيفته الخاصة styleFrom. لذا، عندما تستخدم TextButton، يجب عليك استخدام TextButton.styleFrom.
زر الأيقونة
إنه IconButtonمختلف وله بعض السمات الفريدة:=
- highlightColor : اللون الذي يتم عرضه عند الضغط على الزر أو النقر عليه.
- hoverColor : اللون الذي يتم عرضه عند تحريك المؤشر فوق الزر.
على عكس الأزرار الأخرى، IconButtonلا يحتوي على سمات منفصلة disabledIconColorأو ، حيث يتعامل مع كليهما. كما يفتقر إلى ، حيث يقوم بإدارة تلك التأثيرات.iconColorforegroundColoroverlayColorhighlightColorhoverColorIconButton(icon: const Icon(Icons.thumb_up),style: IconButton.styleFrom(backgroundColor: Colors.blueAccent,foregroundColor: Colors.white,),onPressed: () {},),
في مقتطف التعليمات البرمجية أعلاه، استخدمنا styleالسمة بالاشتراك مع المعلمات backgroundColorand foregroundColorلتعيين لون الخلفية إلى اللون IconButtonالأزرق ولون الرمز إلى اللون الأبيض.
- backgroundColor : يحدد لون خلفية الزر.
- focusColor : اللون الذي يظهر عند التركيز على الزر، كما هو الحال أثناء التنقل عبر لوحة المفاتيح.
- foregroundColor : يحدد لون رمز الزر.
- hoverColor : اللون الذي يتم عرضه عند تحريك المؤشر فوق الزر.
- splashColor : لون تأثير الرش عند الضغط على الزر.
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Transform.scale(
scale: 1.75,
child: OutlinedButton(
style: OutlinedButton.styleFrom(
foregroundColor: Colors.black,
side: const BorderSide(
width: 2.5,
color: Colors.blueAccent,
),
),
child: const Text('Outlined Button'),
onPressed: () {},
),
),
),
),
);
}
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
outlinedButtonTheme: OutlinedButtonThemeData(
style: OutlinedButton.styleFrom(
foregroundColor: Colors.black,
side: const BorderSide(
width: 2.5,
color: Colors.blueAccent,
),
),
),
),
home: Scaffold(
body: Center(
child: Transform.scale(
scale: 1.75,
child: OutlinedButton(
child: const Text('Outlined Button (ThemeData)'),
onPressed: () {},
),
),
),
),
);
}