إزاي تبني Design System خاص بشركتك في فلاتر وتريح دماغك من وجع التعديلات؟
يا مساء الفل على كل المبرمجين. أكيد مريت باللحظة دي: العميل أو الـ Designer بتاعك قرر يغير لون الـ Buttons في التطبيق كله، وأنت لقيت نفسك بتلف على 50 شاشة عشان تعدل الكود يدوي. ده غير إنك أكيد بتنسى زرار هنا أو حقل إدخال (Input Field) هناك، والنتيجة بتبقى واجهة مستخدم (UI) مش متناسقة وشكلها مش احترافي.
في المقال ده، هنتكلم عن إزاي تحل المشكلة دي من جذورها عن طريق بناء نظام تصميم (Design System) خاص بيك باستخدام إعادة بناء الـ Core Widgets في فلاتر (Flutter).
Table of contents [Show]
ليه لازم تبني نظام تصميم خاص بيك؟
بص يا سيدي، البرمجة مش بس إن الكود يشتغل، البرمجة هي إنك تكتب كود "قابل للصيانة" (Maintainable). لما بتبدأ مشروع كبير، الاعتماد على الـ Widgets الأساسية زي ElevatedButton أو TextField بشكل مباشر في كل حتة ده "فخ". لما بتحتاج تعدل الـ Theme، هتلاقي نفسك بتعيد اختراع العجلة كل مرة. بناء Wrapper Widgets بيخليك تتحكم في شكل التطبيق بالكامل من مكان واحد (Single Source of Truth).
بدل ما تستخدم ElevatedButton في كل صفحة، اعمل الـ Widget الخاصة بيك. تعالى نشوف مثال بسيط:
class AppButton extends StatelessWidget {
final String text;
final VoidCallback onPressed;
const AppButton({required this.text, required this.onPressed});
@override
Widget build(BuildContext context) {
return ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blueAccent,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
),
onPressed: onPressed,
child: Text(text, style: TextStyle(color: Colors.white)),
);
}
}
دلوقتي، لو حبيت تغير شكل الـ Buttons في التطبيق كله، كل اللي عليك تعمله هو تعديل الكود جوه الـ AppButton مرة واحدة، والتغيير هيسمع في المشروع كله!
الخطوة الثانية: تخصيص حقول الإدخال (Text Inputs)
الـ TextField في فلاتر أداة قوية، بس عشان تطلعها بشكل شيك، بتاخد كود كتير. الأفضل إنك تغلفها في AppTextField:
class AppTextField extends StatelessWidget {
final String label;
final TextEditingController controller;
const AppTextField({required this.label, required this.controller});
@override
Widget build(BuildContext context) {
return TextField(
controller: controller,
decoration: InputDecoration(
labelText: label,
border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
),
);
}
}
الاستفادة من الـ Theme Data بشكل صحيح
نصيحة تقنية مهمة: ما تحطش الألوان والخطوط (Typography) "Hardcoded" جوه الـ Widgets. استخدم الـ Theme.of(context). ده بيخلي الـ Design System بتاعك يدعم الـ Dark Mode والـ Light Mode بشكل تلقائي من غير مجهود إضافي.
نصيحة من أخ لمبرمج زيه
ما تحاولش تبني كل حاجة من أول يوم. ابدأ بالـ Widgets اللي بتستخدمها كتير زي الأزرار، الحقول، والبطاقات (Cards). مع الوقت، هتلاقي عندك مكتبة (Library) خاصة بيك، وده هيخلي سرعة التطوير عندك تزيد للضعف. المبرمج الشاطر هو اللي بيشتغل بذكاء مش بمجهود عالي. ابدأ دلوقتي، وهتلاقي فرق كبير في جودة كودك والراحة النفسية اللي هتحس بيها لما العميل يطلب تعديلات في آخر لحظة!
بالتوفيق في رحلتك البرمجية، ولو عندك أي استفسار أنا موجود!
