تطوير تطبيق Flutter: دليل كامل

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

تم صياغته في عام 2017 بواسطة Google وهو مفتوح المصدر. إن قدرته على إنشاء تطبيقات عالية الجودة وسريعة الأداء تشمل أنظمة تشغيل الأجهزة المحمولة – Android و iOS – وغيرها من الميزات تجعله خيارًا جيدًا للعديد من المطورين.

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

إذا كنت قد فكرت في استخدام Flutter ، فهذا هو الوقت المناسب للبدء. في هذه المقالة ، ستتعلم كيف يمكن أن يساعدك Flutter كمطور وكيف يمكنك استخدامه لتمكين منتجاتك.

ما هو Flutter؟

Flutter هو إطار عمل مفتوح المصدر ، يسمى أحيانًا Software Development Kit (SDK) ، يستخدم لبناء تطبيقات عبر الأنظمة الأساسية مجمعة محليًا. يمكنك إنشاء حلول للأجهزة المحمولة والويب وأجهزة Mac من قاعدة تعليمات برمجية واحدة.

يتألف Flutter من إطار عمل – مجموعة من مكونات واجهة المستخدم القابلة لإعادة الاستخدام (الأزرار والنماذج والمنزلقات وما إلى ذلك) والتي يمكنك تخصيصها وفقًا لاحتياجاتك ، و SDK – مجموعة من الأدوات بما في ذلك الأطر والمكتبات وواجهات برمجة التطبيقات لمساعدتك في تطوير تطبيقات تعمل بكامل طاقتها.

يتم كتابة إطار عمل Flutter بلغة برمجة Dart ، التي طورتها Google ، والتي تركز بشكل كبير على الواجهة الأمامية.

لماذا تحتاج Flutter كمطور؟

على عكس الاحتفاظ بالعديد من المكتبات في Java و JavaScript و Swift لنظام Android و iOS ، كل ذلك لتطبيق واحد في أنظمة تشغيل متعددة (OS) ، يحيط Flutter كل التعليمات البرمجية بلغة واحدة ، وهذه البنية تناسب التطوير المتقاطع. بالطبع ، فإن إدارة الكود لجميع تطبيقاتك في وقت واحد يوفر وقت المطور.

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

ما الذي يجعل Flutter فريدًا؟

يتمتع Flutter بسمعة طيبة في توفير الوقت لعمليات تطوير التطبيقات والتكاليف ويساعد في إنشاء تطبيقات بتصميمات تفاعلية للمستخدم ورسوم متحركة سلسة.

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

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

SDK المتوفرة والميزات الأصلية: تستخدم Flutter كودها الأصلي ، وواجهات برمجة تطبيقات النظام الأساسي ، وتكامل الطرف الثالث ، مما يبسط إجراءات التطوير ، وبالتالي ، تجربة مطور جيدة.

الأدوات المصغرة: يحتوي Flutter على العديد من التصميمات المتخصصة التي يمكنك تخصيصها وفقًا لاحتياجاتك.

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

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

بعد ذلك ، سوف نستكشف بعض مزايا استخدام Flutter.

مزايا استخدام الرفرفة

# 1. واجهة مستخدم منطق الأعمال على جميع الأنظمة الأساسية

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

# 2. تقليل وقت تطوير الكود

إذا كنت تعمل على تطبيق android متوسط ​​الحجم ، فسيستغرق الأمر ما يصل إلى 40 ثانية لضبط ميزة التخطيط. تجعل ميزة إعادة التحميل السريع المدمجة تغييراتك فورية تقريبًا.

# 3. زيادة الوقت اللازم لسرعة السوق

إذا كنت تستخدم Flutter لتطوير تطبيقك ، فستأخذك نصف القوة العاملة المطلوبة بدلاً من العمل على تطبيقين منفصلين ، على سبيل المثال على Android و iOS.

يوفر لك هذا الوقت لأنك لست مضطرًا إلى كتابة رمز خاص بالمنصة ، ومع ذلك ستستمر في تحقيق المرئيات المطلوبة عبر جميع الأنظمة الأساسية الخاصة بك.

# 4. التشابه مع تطوير التطبيقات الأصلية

يعطي النهج التكنولوجي المتبع اليوم لبناء المنتجات الرقمية الأولوية لتجربة المستخدم (UX). باستخدام Flutter ، يمكنك إنشاء رسوم متحركة لواجهة مستخدم (UI) أفضل ؛ تم دمج Flutter مباشرة في كود الآلة ، مما يقضي على أخطاء الأداء في عملية التوضيح.

# 5. النمو السريع للتطبيقات

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

# 6. ميزات تصميم أضيق الحدود

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

عيوب استخدام الرفرفة

# 1. مكتبات

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

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

# 2. اندماج

قد يكون دمج Flutter مع منصات التكامل المستمر (CI) أمرًا صعبًا ، على عكس Android و iOS الأصليين. قد تحتاج إلى إنشاء نصوص مخصصة وصيانتها لإنشاء تطبيقات Flutter واختبارها ونشرها في عمليات CI.

# 3. ضعف دعم ميزات iOS

تدعم Google Flutter ، تاركة دعم iOS يعاني. على سبيل المثال ، يحذف تطبيق على iOS جميع بيانات EXIF ​​عند التقاط الصور أثناء استخدام أجهزة Apple. نتيجة لذلك ، تحصل صورتك على اتجاه وموقع وجاما غير صحيح. عندما تنظر إلى ميزات إمكانية الوصول الفريدة لنظام iOS ، مثل التعليق الصوتي والوصول الإرشادي والتسميات التوضيحية والوصف الصوتي ، لا يتم دعمها جيدًا في Flutter.

كيفية عمل تطبيق Flutter

لقد قضيت بالفعل وقتًا طويلاً في أن تكون نظريًا ؛ دعنا نحصل على التكتيكات ونعمل على تطبيق بسيط لمساعدتك على فهم كيفية البناء باستخدام Flutter.

تركيب Flutter

ستحتاج إلى بيئة تطوير متكاملة (IDE) لتطوير البرامج وإنشائها واختبارها بسرعة. يمكنك الاختيار بين:

كود VS – لديه كل الصفات المطلوبة في IDE ، بما في ذلك الخفة والسرعة. كان VS Code من أفضل خيارات المطورين ؛ يمكنك التركيز عليه.

Android Studio – لبدء Android Studio ، ما عليك سوى إعداد SDK الخاص به. قم بتثبيت الإضافات Flutter و Dart.

قم بتثبيت Flutter SDK عن طريق تنزيله من موقع Flutter الرسمي. بعد التنزيل ، قم بتثبيت SDK وانقر فوق “إضافة إلى ملف المسار” للتأكد من تعيين كل شيء.

إنشاء تطبيق Flutter بسيط

في هذا القسم ، ستنشئ تطبيق Flutter بسيطًا لفهم كيفية عمل الأشياء. من الأساسي أن تمنحك بداية قوية في بنية Flutter وطرقها الرئيسية. ستنشئ تطبيقًا بسيطًا ليقول “Hello World” للمستخدم.

للبدء ، افتح الجهاز الطرفي على VS Code واكتب:

Flutter create proj_hello_world

تم تطوير المشروع على الهيكل:

proj_hello_world

توجد صيغ مختلفة لتطبيقات مختلفة:

• Android – لإنشاء تطبيقات قائمة على Android. يتم تخزين جميع تطبيقات Android في هذا الدليل الفرعي.
• الأصول – موقع لتخزين جميع ملفاتك مثل الصور وما إلى ذلك.
• iOS – ينتج تطبيق iOS. توجد جميع تطبيقات تطبيق iOS في هذا الدليل الفرعي.
• Lib – ملف أساسي ، “main.Dart” ، حيث يتم إنشاء أحد رموز المفاتيح.
• الاختبار – يستخدم لإجراء الاختبار.

سيتطلب أي برنامج Flutter ملف “main.Dart”. قبل أي تطوير ، يجب عليك مسح الكود الموجود في الملف ؛ يرجى التأكد من قيامك بذلك قبل المتابعة.

بعد ذلك ، يجب عليك إحضار حزمة “المواد” لتضمين عناصر واجهة المستخدم. انسخ الكود التالي والصقه في جهازك الطرفي.

import 'package:flutter/material.dart';

لا تختلف Flutter عن أي لغة برمجة أخرى ؛ يبدأ التنفيذ بالطريقة الرئيسية.

void main() => runApp(new HelloWorldApp());

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

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

class HelloWorldApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
Now comes the main magic-
return new MaterialApp(
home: new Material(
child: new Center(
child:new Text("Hello world!"),

ستعمل أداة “المركز” على تشغيل العناصر بينما يقوم “MaterialApp” بتغليف عنصر واجهة المستخدم ، الذي يتكون من المادة.

في هذه الحالة ، تقوم بإضافة عنصر واجهة مستخدم لحقل نص به نص ؛ لا تتردد في استخدام الخاص بك. إلى جانب الخصائص المرئية المستخدمة هنا ، “المنزل والطفل” ، هناك العديد من السمات لإدارة واجهة مستخدم كاملة ، مثل التصميم والزخارف والتواريخ والوقت والموقع وما إلى ذلك.

انت على وشك الوصول؛ حان الوقت لدمج الكود الخاص بنا. تأكد من أن لديك ما يلي في محرر التعليمات البرمجية الخاص بك.

import 'package:flutter/material.dart';
void main() => runApp(new HelloWorldApp())
class HelloWorldApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
Now comes the main magic-
return new MaterialApp(
home: new Material(
child: new Center(
child:new Text("Hello world!"),
),),);}}

أخيرًا ، أدخل هذا الأمر وقم بتشغيله.

flutter run

تهانينا ، يجب أن تكون مخرجاتك عبارة عن “Hello World!” شاشة مأهولة.

اختبار الرفرفة

إذا كنت تعمل في عالم تطوير البرامج ، فأنت تعلم مدى صعوبة اختبار أن تطبيقك يعمل بشكل جيد يدويًا. إذا لم تقم بذلك ، يمكنك تصور إنشاء تطبيقات كبيرة بآلاف الميزات الفريدة. حاول كما تريد ، لا يمكنك اختبار الميزات يدويًا. تؤكد الاختبارات الآلية أن تطبيقك يعمل بشكل صحيح قبل نشره في الإنتاج.

فيما يلي فئات الاختبار الآلي:

# 1. اختبار الوحدة

في هذه الحالة ، تختبر وظيفة أو فئة أو طريقة واحدة. هدفك هو التحقق من أن الوحدة صحيحة في ظل ظروف مختلفة. لا تكتب اختبارات الوحدة على القرص أو تقرأ منه ، ولا تتلقى إجراءً من المستخدم ، ولا تعرض للشاشة خارج عملية الاختبار. إذا كنت تريد التعمق أكثر في اختبار الوحدة ، فقم بتشغيل “اختبار الرفرفة –help” على جهازك الطرفي.

# 2. اختبار القطعة

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

# 3. إختبار الإدماج

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

كيف تصبح مطور Flutter

اليوم ، يرتفع الطلب على سوق العمل لمطوري Flutter مع الأخذ في الاعتبار المزايا التي ذكرناها سابقًا. إذا كنت تفكر في تعلم Flutter ، فقد اتخذت القرار الصحيح.

اجمع بعض المعرفة الأساسية ، مثل البرمجة الشيئية ، ويفضل أن تكون جافا. إن تعلم اللغة الأصلية لنظام Android يجعل الاختراق في طريقك من خلال Flutter أمرًا سهلاً.

ابدأ بالأساسيات ، وانتقل إلى تطوير واجهة المستخدم ، وتعلم كيفية إجراء استدعاءات واجهة برنامج التطبيق (API). انتقل إلى تكامل قاعدة البيانات وتعلم إدارة الحالة. أخيرًا ، قم بلفها بهندسة المشروع.

مصادر التعلم

إليك بعض الدورات التعليمية المذهلة لمساعدتك على اقتحام تطوير تطبيق Flutter. تتكون هذه الجولة من دورات Udemy وكتب أمازون.

# 1. Flutter and Dart – الدليل الكامل

هذه الدورة هي دليل كامل لـ Flutter SDK وإطارها لبناء تطبيقات Android و iOS الأصلية. سوف تتعلم الأساسيات وتتعمق في الموضوعات ، وتصبح في النهاية مطورًا متقدمًا.

# 2. البرنامج التدريبي الكامل لتطوير تطبيقات Flutter مع Dart

لا توجد طريقة أفضل لتعلم Flutter من أخذ هذه الدورة التدريبية في Flutter Development Bootcamp مع Dart ، الذي تم إنشاؤه بالتعاون مع فريق Google Flutter. ستعرف أن الجميع يفهم كل مفاهيم تطوير Flutter.

# 3. تعلم Flutter من Scratch

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

# 4. التوثيق الرسمي للرفرفة

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

# 5. Real-World Flutter by Tutorials (الإصدار الأول)

إذا كنت قد أتقنت أساسيات Flutter وترغب في التقدم ، فإن هذا الكتاب عن Real-World Flutter by Tutorials (الإصدار الأول) هو خيارك الأول.

ستنتقل من مجرد معرفة إلى إنشاء تطبيقات Flutter بشكل احترافي.

# 6. المرجع الكامل للرفرفة

هذا الكتاب هو معالجة تفصيلية لإطار عمل Flutter ولغة برمجة Dart ويتعمق أكثر في الموضوعات العميقة وأفضل الممارسات لتطوير تطبيق Flutter.

يتكون الموقع الرسمي لهذا الكتاب من بعض ألعاب الاختبار لاختبار مجموعات المهارات الخاصة بك.

# 7. كتاب الطبخ رفرفة

هذا الكتاب عبارة عن مغامرة حول كيفية إنشاء تطبيقات iOS و Android الأصلية وتصحيحها وتوسيع نطاقها.

تجول في البرامج التعليمية الشاملة باستخدام Flutter ، وقم بالتكرار من خلال واجهات المستخدم الفريدة (UI).

# 8. رفرفة للدمى

هذا الكتاب ، المسمى Flutter for Dummies ، فريد من نوعه. يعلمك لغة البرمجة Dart.

يشرح كيفية تهيئة أطر العمل الخاصة بك وأخيراً يزودك بجميع الأساسيات لركوب تطوير تطبيق Flutter الثوري.

# 9. بناء الألعاب مع الرفرفة

سواء كنت تبحث عن استكشاف أو بناء ألعاب Flutter ، فإن هذا الكتاب هو دليل شامل لبناء ألعاب متعددة المنصات باستخدام محرك Flutter’s Flame.

الكتاب إجرائي لضمان فهمك لجميع الخطوات وأفضل ممارسات التطوير.

# 10. مشاريع Flutter

يعلمك هذا الكتاب لغة برمجة Dart وإطار عمل Flutter من خلال إرشادك من خلال إنشاء تطبيقات وألعاب واقعية.

لديها مشاريع عملية توضح أفضل التقنيات لتطوير تطبيقات Flutter.

الكلمات الأخيرة

لديك الآن إحساس كامل بكيفية عمل Flutter وكيف يمكن أن تساعدك في بناء منتجات رقمية. يوفر لك Flutter هيمنة كاملة في مرونة التطبيق ، ولا يمكن لخيالك إلا أن يحدك.

بمجرد إتقان أساسيات تطوير Flutter ، يمكنك إنشاء أي تطبيق ، سواء على الويب أو Android أو Mac أو iOS ، لتلبية احتياجات أي عميل.

بعد ذلك ، تحقق من أفضل الأطر لإنشاء تطبيقات بدون خادم.