خطة تعلم فلاتر flutter خطوة بخطوة

خطة تعلم فلاتر Flutter

منذ إطلاق فلاتر حصل Flutter شعبية كثيرة ونتمنى أن يتحول جزء كبير من تطبيقات إلى فلاتر نظرا لوجود شعبية كبيرة ولكن لا يوجد مقالات كثيرة عبر الإنترنت لتعلم أساسيات فلاتر Flutter في هذا المقال قمنا في تجميع خطة تعلم Flutter خطوة بخطوة والبدء في مسار Flutter ومجال تطوير التطبيقات Flutter.

مسار تعلم Flutter

إليك دليل Flutter خطوة بخطوة للمبتدئين:

• ما هي Flutter
• إعداد Flutter
• أساسيات دارات Dart
• أساسيات فلاتر Flutter
• Widgets
• Layouts
• Widgets التفاعلية
• تصميم التطبيق

ما هي Flutter

ما هو Flutter وكيف يختلف هو إطار عمل من شركة جوجل مفتوح المصدر لإنشاء تطبيقات ومتعددة المنصات من كود واحد كونك مبرمج تطبيقات Flutter , عليك أن تتذكر هذا تم تصميم Flutter للعمل على أي نظام:

• Android و IOS
• مواقع الويب وسطح المكتب (Mac و Windows و Linux)

إعداد Flutter

Flutter سهل تثبيت تقريبا ويعتمد على نظام التشغيل الذي تعتمد عليه يمكنك تعلم خطوات تثبيت Flutter السبب في أننا نطلب منك تنصيب Flutter قبل Dart لأن عندما تقوم في تثبيت Flutter في أنت أيضا تقوم في تثبيت Dart, يمكنك تثبيت Dart بشكل منفصل ولكن خطوة غير ضرورية سيختار Flutter أي إصدار Dart سيتم استخدامه لذلك راح يكون تثبيت إصدار Dart مختلفا.

إذا كنت مبتدئا في تطوير الأجهزة في سوف تحتاج إلى تنزيل Xcode و Android Studio و toolchain, بمجرد الانتهاء من تنزيل Flutter.

أساسيات دارات Dart

يستخدم فلاتر لغة Dart لبناء التطبيقات. بدل من التفاعل مع واجهات برمجة التطبيقات ، يتحكم في كل بكسل على الشاشة ، مما يعطي الكثير من الحرية بالإضافة إلى الأداء الذي يتمتع به.

يمكنك متابعة مع تحديثات Dart على حساباتهم.

تعلم فلاتر

اقرأ المستندات الآتية للغة Dart وأخذ نظرة عليهم بمجرد الحصول على نظرة عامة من هذا الموقع التعليمي Dart توجه إلى jpryan.

الممارسة

قم بكتابة الكود الخاص بك على موقع DartPad للمبتدئين أنا متأكد من أنك سوف تكون جاهزا على العمل بسهولة.

بعد ذلك , انتهيت من أساسيات Dart وأكمل مسار تعلم Flutter.

أساسيات فلاتر Flutter

الآن بعد أن أصبحت متعلما على Dart, وأخيرا سوف ننتقل إلى أساسيات فلاتر Flutter.

لنبدأ في هذا موقع تعلم Flutter مع نظرة عامة.

أضف Scaffold جديد في تطبيق Flutter:

flutter create app_name

افتح مشروعا على Android Studio وقم في تثبيت المحاكي وإصدار Android, تعلم كيفية هيكلة دليل المشروع الخاص بك وفهم الملفات المخصصة.

اقرأ المزيد: ما هي لغة فلاتر Flutter

الآن بعد أن قمت بتثبيت Flutter, هناك خطوة أخرى في هذا الموقع التعليمي Flutter للمبتدئين وهي أن تفعل ما يفعله المطورون استخدام كود الآخرين 😂 ما أقصد عليه هو إعداد ملف حزمة Pubspec مكتوب بلغة YAML.

Widgets

إذا لم تكن قد قرأت النظرة العامة كما تكلمنا سابقا من قبل فارجع اقرأها 😅 Stateless Widgets هي تلك التي لا تتغير حالتها مثل الزر والصورة , كما يوضح الاسم , فإنه لا يقوم في تغيير حالته عند تنفيذ إجراء على الشاشة , تأكد من سلسة مقاطع الفيديو , وهي وثائق من شركة جوجل.

أداة Stateful widgets هي الخيار الأفضل عندما يتعين على عنصر واجهة المستخدم , مثل الصفحة الحالية PageView أو علامة التبويب مثل BottomNavigationBar.

يمكن تخزين Widget's باستخدام Stateful Widgets يحتوي عنصر واجهة المستخدم , طريقة إنشاء Stateful widget التي يتم استدعاؤها في كل مرة تسمى setState عوضا عن إنشاء عنصر واجهة المستخدم , أنظر إلى وثائق stateful widgets الخاصة هنا والتي يوجد فيها مقطع فيديو.

Layouts

نماذج Layout هي أيضا عناصر واجهة المستخدم في فلاتر , كما تكلمنا عنها سابقا في هذه المقالة , تسمح أدوات تخطيط التي لا يمكنك رؤيتها على الشاشة , بعناصر واجهة مستخدم مرئية بالترتيب والتقييد والمحاذاة , تشمل الأمثلة الصفوف والأعمدة والشبكات.

بعض Widgets الأخرى

يتم إضافة مجموعة مختلفة من عناصر واجهة المستخدم الأساسية القوية. بما ذلك مثل Text و Column و Row و Stack و Container ,في Flutter يتيح لك إنشاء أي نوع من العرض المخصص الذي تريده باستخدام عناصر واجهة المستخدم الأساسية , إذا كان تطبيقك ملتزما بمبدأ تصميم متعدد الأبعاد في Flutter فيه الكثير يقدمه افتراضيا , يتم تقديم العديد من Widgets التي يدعمها تصميم عن طريق Flutter ويحتوي على أدوات مثل Scaffold و MaterialApp و AppBar وغيرها. 

يأتي فلاتر أيضا مع حزمة مكونات Cupertino , والتي تركز على نظام التشغيل IOS يتم تغطية Widgets مثل CupertinoApp و CupertinoNavigationBar وغيرها.

Widgets التفاعلية

لقد رأينا عناصر واجهة المستخدم تنظم عناصر واجهة مستخدم أو تعرض معلومات على الشاشة في هذا الموقع التعليمي خطوة بخطوة من Flutter, جعل التطبيق دِينَامِيكِيًّا وسماح للمستخدمين في تقديم المدخلات من خلال واللمسات والأساليب الأخرى أمر جدا مهم للتطبيق الحقيقي.

يقدم Flutter مجموعة مختلفة من StatefullWidgets, بما في ذلك Checkbox و Radio و Slider و InkWell و Form و TextField, من بين الأمور أخرى , للمساعدة في ذلك تتمتع هذه Widgets بالقدرة على الحفاظ على حالتها على سبيل المثال النص الذي ندخله في Text Field سواء تم فحص قائمة التحقق أو لا.

بالإضافة إلى ميزة "المفضلة" / "غير المفضلة" إلى تطبيقك , الآن يجب أن تكون فضوليا عن ما هي جميع Widgets المتوفرة في Flutter إذن هوة Widget Catalog, تأكد من جميع Widgets التي تجعل تطوير Flutter مريحا وممتعا 😍.

تصميم التطبيق

توفر هذه الإمكانات في هذا التطبيق ذي المظهر البسيط:

• Navigation Drawer (درج التنقل)
• SnackBar (رسالة تنبيه)
• Custom Fonts (خطوط مخصصة)
• Multiple Tabs (علامات تبويب متعددة)

Forms

يمكنك إنشاء النموذج الذي يتحكم بشكل فعال في المتطلبات الأساسية للنموذج ، مثل حالة النموذج والتحقق من الصحة وما إلى ذلك ، باستخدام عنصر واجهة المستخدم للنموذج في Flutter. عرض الوثائق الخاصة بالنقابة بأكملها أدناه.

Gestures

نحن نحقق أقصى استفادة من الإيماءات من أجل جمع مدخلات المستخدم وأحيانًا لجعل التطبيق ديناميكيًا حَقًّا. تم تغطية هذا من خلال عناصر واجهة مستخدم مسبقة الصنع في Flutter.

Images

نحن نستخدم الصور لتجميل وتنشيط التطبيقات. لعرض صورة من مصادر متعددة داخل تطبيق Flutter ، يقدم Flutter أداة Image.

كم احتاج لتعلم Flutter؟

فقط أولئك الذين لديهم خبرة في البرمجة ، قادمون بشكل مثالي من Java ، يمكنهم تعلم Flutter في بضعة أسابيع عوضا عن شهور. ومع ذلك ، يعد القيام بذلك فكرة ذكية لأن إطار العمل ممتاز ويأتي مع IDE رائع ووثائق ممتازة. سيستغرق تعلم كل شيء من الصفر شهورًا.

لماذا ترغب بتعلم Flutter؟

يعد Flutter خيارًا رائعًا إذا كنت تريد معرفة كيفية تطوير تطبيقات الهاتف المحمول. يوفر النهج عبر الأنظمة الأساسية لتطوير التطبيقات العديد من المزايا ، بما في ذلك النشر الأسرع وقاعدة شفرة واحدة لكل من iOS و Android وزيادة الفعالية وترقيات التطبيق المتزامنة.

هل Flutter ليها مستقبل؟

من قاعدة كود واحدة ، يمكنك الآن تطوير تطبيقات لست منصات. لأنها موجودة لتبقى ، هذه الحقيقة وحدها تجعل مستقبل Flutter متوقعًا للغاية. مع وجود أكثر من 500000 تطبيق تم إنشاؤه الآن باستخدام Flutter ، فإن هذا الإصدار الأحدث بقدراته الإضافية سيرفع هذا الرقم في نهاية الأمر بمقدار 500000 تطبيق آخر.