تغيير لون الأزرار عند تمكين 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نص بخلفية زرقاء ونص أبيض باستخدام وظيفته styleFrom.
import ‘package:flutter/material.dart’;
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.5,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blueAccent,
foregroundColor: Colors.white,
),
child: const Text(‘Elevated Button’),
onPressed: () {},
),
),
),
),
);
}
}
في مقتطف التعليمات البرمجية أعلاه، لدينا ElevatedButtonنص “Elevated Button” في المنتصف. لقد قمنا بتغيير لون الزر باستخدام styleالسمة. في styleالسمة، قمنا بتعيين a ButtonStyleباستخدام styleFromالدالة من ElevatedButtonالفئة. داخل styleFromالدالة، قمنا بتعريف المعلمات backgroundColorand foregroundColorلتعيين لون خلفية الزر إلى اللون الأزرق ولون النص إلى الأبيض.
ElevatedButtonتم زيادة حجم باستخدام Transform.scale، لأغراض العرض فقط.
كما ذكرنا سابقًا، لكل زر وظيفته الخاصة styleFrom. لذا، عندما تستخدم TextButton، يجب عليك استخدام TextButton.styleFrom.
زر الأيقونة
إنه IconButtonمختلف وله بعض السمات الفريدة:=focusColor : اللون الذي يظهر عند التركيز على الزر، كما هو الحال أثناء التنقل عبر لوحة المفاتيح.
- highlightColor : اللون الذي يتم عرضه عند الضغط على الزر أو النقر عليه.
- hoverColor : اللون الذي يتم عرضه عند تحريك المؤشر فوق الزر.
على عكس الأزرار الأخرى، IconButtonلا يحتوي على سمات منفصلة disabledIconColorأو ، حيث يتعامل مع كليهما. كما يفتقر إلى ، حيث يقوم بإدارة تلك التأثيرات.iconColorforegroundColoroverlayColorhighlightColorhoverColor
IconButton(
icon: const Icon(Icons.thumb_up),
style: IconButton.styleFrom(
backgroundColor: Colors.blueAccent,
foregroundColor: Colors.white,
),
onPressed: () {},
),
في مقتطف التعليمات البرمجية أعلاه، استخدمنا styleالسمة بالاشتراك مع المعلمات backgroundColorand foregroundColorلتعيين لون الخلفية إلى اللون IconButtonالأزرق ولون الرمز إلى اللون الأبيض.
زر العمل العائم
يختلف تغيير ألوان الزر FloatingActionButtonعن الأزرار الأخرى لأنه لا يحتوي على styleسمة. ومع ذلك، يمكنك تخصيص ألوانه باستخدام السمات التالية:
- backgroundColor : يحدد لون خلفية الزر.
- focusColor : اللون الذي يظهر عند التركيز على الزر، كما هو الحال أثناء التنقل عبر لوحة المفاتيح.
- foregroundColor : يحدد لون رمز الزر.
- hoverColor : اللون الذي يتم عرضه عند تحريك المؤشر فوق الزر.
- splashColor : لون تأثير الرش عند الضغط على الزر.
FloatingActionButton(
backgroundColor: Colors.blueAccent,
foregroundColor: Colors.white,
child: const Icon(Icons.mail_outline, size: 35),
onPressed: () {},
),
في مقتطف التعليمات البرمجية أعلاه، استخدمنا السمات backgroundColorand foregroundColorلإعطاء FloatingActionButtonخلفية زرقاء ورمز أبيض.
تغيير لون حدود الأزرار
حتى الآن، قمنا بتغيير ألوان الأزرار باستخدام سمة styleFromالدالة style. ومع ذلك، لا تسمح لنا هذه الطريقة بتغيير لون حدود الزر. لتعديل لون الحدود، نحتاج إلى استخدام المعلمة side.
import ‘package:flutter/material.dart’;
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: () {},
),
),
),
),
);
}
}
في مقتطف التعليمات البرمجية أعلاه، استخدمنا sideالمعلمة لتغيير لون حدود العنصر OutlinedButtonإلى اللون الأزرق. sideتأخذ المعلمة مثيلًا من BorderSideالفئة، حيث قمنا بتعيين العنصر widthإلى 2.5والعنصر colorإلى اللون الأزرق.
تغيير ألوان الأزرار باستخدام ThemeData
بدلاً من تعديل نمط كل زر على حدة، يمكنك تعيين سمات عامة لجعل جميع الأزرار تبدو بنفس الشكل. إذا كنت بحاجة إلى ذلك، فلا يزال بإمكانك تجاوز السمة العامة عن طريق تعيين السمة styleعلى زر معين، مما يمنحك المرونة لإجراء تغييرات مخصصة.
import ‘package:flutter/material.dart’;
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: () {},
),
),
),
),
);
}
}
في مقتطف التعليمات البرمجية أعلاه، استخدمنا themeسمة MaterialAppالأداة لتطبيق سمة عالمية على OutlinedButton. لقد فعلنا ذلك باستخدام مثيل لـ ThemeData، والذي يسمح لنا بتعريف أنماط عالمية للتطبيق. على وجه التحديد، قمنا بتعيين outlinedButtonThemeسمة ThemeDataلمثيل OutlinedButtonThemeData. داخل هذا المثيل، قمنا بتطبيق نفس النمط الذي استخدمناه سابقًا لـ OutlinedButton.
في هذه المقالة، تعلمت كيفية تغيير ألوان الأزرار في Flutter. بدأنا باستخدام السمة styleوالدالة styleFrom. ثم ناقشنا السمات الفريدة لـ IconButtonو FloatingActionButton. وأخيرًا، تناولنا كيفية ضبط ألوان حدود الأزرار وتعيين السمات العالمية، حتى لا تحتاج إلى تخصيص كل زر على حدة.