نظرة عامة على إطار عمل واجهة مستخدم فلاتر

May 20, 2025

# نظرة عامة على إطار عمل Flutter UI

## مقدمة
- **Flutter** هو إطار عمل لواجهة المستخدم لبناء التطبيقات عبر الأنظمة (iOS، Android، الويب، سطح المكتب).
- يجمع بين محرك رسومات عالي الأداء ولغة البرمجة **Dart**.

## الميزات الأساسية لـ Dart في Flutter
- **أمان النوع الكامل**: يضمن توافر الثقة في تطوير التطبيقات.
- **إعادة التحميل الساخن مع الحالة**: يسرع عملية التطوير من خلال تمكين المطورين من رؤية التغييرات في الحال.
- **الترجمة إلى كود الجهاز الأصلي**: يضمن العرض السلس على أي منصة.

## بدء العمل مع Flutter
- **التثبيت**: ثبّت Flutter واستخدم الأمر `flutter create` لبدء مشروع جديد.
- **ملف Dart الرئيسي**: الموقع الأساسي لتطوير التطبيق.

## هيكل واجهة المستخدم في Flutter
- **الودجت**: الواجهة عبارة عن شجرة من الودجت. كل شيء في Flutter هو ودجت.
  - **الودجات المبنية مسبقًا**: يوفر Flutter مئات الودجات للرسوم المتحركة والتمرير والتخطيطات المتجاوبة وغيرها.
  - **الودجات المخصصة**: يتم إنشاؤها بتمديد فئة `StatelessWidget` وتجاوز طريقة `build`.

## الودجات الثابتة مقابل الودجات الديناميكية
- **ودجات ثابتة**
  - غير متغيرة، لا تحتوي على بيانات داخلية.
  - يتم إعادة بناء الواجهة استجابة للتغييرات في بيانات الإدخال.
- **ودجات ديناميكية**
  - تستخدم للعناصر التفاعلية حيث تتغير البيانات الداخلية.
  - استخدم `setState` لتحديث البيانات وإعادة عرض الواجهة.

## تطوير باستخدام Flutter
- **أوامر التطوير**:
  - **flutter run**: اختبار التطبيق على جهاز حقيقي.
  - **Control + Shift + R**: تغليف العناصر مع ودجات أخرى في بيئة التطوير المتكاملة.
- **إعادة التحميل الساخنة**: استخدم الأمر `r` لإعادة تحميل التغييرات بسرعة دون فقد حالة التطبيق.

## تعديلات مثالية
- **مركزية زر**: استخدم غلاف ودجت `Center`.
- **تغيير لون الزر**: معاينة التغييرات مباشرة في بيئة التطوير المتكاملة.

## الخاتمة
- يوفر Flutter تجربة مطور فعالة وممتعة مع تحديثات واجهة مستخدم سريعة وأداء موثوق به.
- لمزيد من التعلم، يمكنك الاطلاع على دورات مثل دورة Flutter Firebase على Fire Ship i/o.