📱

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

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.