مقدمة إلى فلاتر: دورة للمبتدئين

ما هو فلاتر: فهم إطار فلاتر

فلاتر هو إطار تطبيقات مفتوح المصدر تم تطويره بواسطة جوجل وقد أحدث ثورة في تطوير التطبيقات عبر الأنظمة الأساسية. يسمح للمطورين بإنشاء تطبيقات مترجمة محليًا لعدة منصات من قاعدة شيفرة واحدة. وهذا يعني أنه يمكنك كتابة الشيفرة الخاصة بك مرة واحدة وإطلاقها عبر أنظمة iOS وAndroid والويب وWindows وmacOS وLinux.

تشمل الخصائص الرئيسية لفلاتر:

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

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

سواء كنت تبني خدمات RESTful أو تعمل مع GraphQL، فإن نهج APIDog القوي والفعال يجعلها رفيقًا مثاليًا لمطوري فلاتر الذين يركزون على إنشاء تطبيقات استثنائية عبر الأنظمة الأساسية.

لماذا تختار فلاتر: مزايا فلاتر للمطورين

1. قاعدة شيفرة واحدة: على عكس التطوير التقليدي حيث تحتاج إلى فرق منفصلة لـ iOS وAndroid، يسمح لك فلاتر بالحفاظ على قاعدة شيفرة واحدة فقط.
2. واجهة مستخدم جميلة: يأتي فلاتر مع مجموعة غنية من الودجات القابلة للتخصيص التي تتبع مبادئ تصميم المواد، مما يجعل تطبيقاتك جذابة بصريًا عبر المنصات.
3. إعادة تحميل فورية: هذه الميزة تسمح للمطورين برؤية التغييرات في الوقت الحقيقي دون فقدان حالة التطبيق الحالية، مما يسرع بشكل كبير من عملية التطوير.
4. أداء أصلي: يقوم فلاتر بالترجمة إلى شيفرة ARM أصلية، مما يضمن أداءً عاليًا ينافس التطبيقات التي تم تطويرها محليًا.
5. منحنى تعلم بسيط: بالمقارنة مع الأطر الأخرى، فإن هيكل فلاتر نسبيًا مباشر وأسهل في الفهم للمبتدئين.

إعداد فلاتر: تثبيت بيئة تطوير فلاتر

لنبدأ بإعداد بيئة تطوير فلاتر على macOS. العملية مشابهة لـ Windows وLinux مع بعض الاختلافات الطفيفة.

الخطوة 1: قم بتنزيل حزمة تطوير فلاتر (Flutter SDK)

قم بتنزيل أحدث إصدار مستقر من حزمة تطوير فلاتر من الموقع الرسمي (flutter.dev). في هذا الدليل، سنستخدم فلاتر 2.0.2:

1. اذهب إلى صفحة تثبيت فلاتر
2. قم بتحميل ملف zip (flutter_macos_2.0.2-stable.zip)
3. استخرجها إلى موقع من اختيارك (مثل ~/development)

mkdir -p ~/development
unzip ~/Downloads/flutter_macos_2.0.2-stable.zip -d ~/development

الخطوة 2: أضف فلاتر إلى مسارك

لاستخدام أوامر فلاتر من أي نافذة طرفية، أضف فلاتر إلى مسارك:

1. افتح أو أنشئ ملف التعريف الخاص بك:

open -e ~/.bash_profile

1. أضف السطر التالي إلى الملف الشخصي الخاص بك:

export PATH="$PATH:~/development/flutter/bin"

1. احفظ الملف وطبق التغييرات:

source ~/.bash_profile

الخطوة 3: قم بتخزين أدوات فلاتر مؤقتًا

قم بتشغيل الأمر التالي لتنزيل أدوات فلاتر الأساسية:

flutter precache

الخطوة 4: تحقق من تثبيت فلاتر

تحقق من تثبيتك من خلال تشغيل:

flutter doctor

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

متطلبات فلاتر: إعداد أدوات خاصة بالمنصات لتطوير فلاتر

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

لتطوير iOS:

1. قم بتثبيت Xcode من متجر تطبيقات Mac
2. افتح Xcode وقم بقبول اتفاقية الترخيص
3. قم بتثبيت المحاكي iOS:

open -a Simulator

لتطوير Android:

1. قم بتنزيل وتثبيت Android Studio من developer.android.com/studio
2. قبول تراخيص Android SDK:

flutter doctor --android-licenses

1. إنشاء جهاز افتراضي أندرويد (AVD):

• افتح Android Studio
• اذهب إلى أدوات > مدير AVD
• انقر على "إنشاء جهاز افتراضي" واختر تعريف جهاز (مثل Pixel 4)
• اختر صورة نظام (يفضل أن تكون أحدث إصدار مستقر من Android)
• سمّ جهاز الـ AVD الخاص بك وانقر على "إنهاء"

1. تثبيت الإضافة الخاصة بفلاتر لـ Android Studio:

• اذهب إلى Android Studio > تفضيلات > ملحقات
• ابحث عن "فلاتر" وانقر على "تثبيت"
• قم أيضًا بتثبيت إضافة "دارت" عند الطلب

إنشاء أول تطبيق فلاتر الخاص بك: إعداد مشروع فلاتر

الآن لنقم بإنشاء تطبيق فلاتر بسيط لفهم الأساسيات.

الخطوة 1: إنشاء مشروع فلاتر جديد

flutter create my_first_flutter_app
cd my_first_flutter_app

هذا الأمر ينشئ مشروع فلاتر جديد مع جميع الملفات والمجلدات الضرورية.

الخطوة 2: استكشاف هيكل مشروع فلاتر

يحتوي مشروع فلاتر على عدة دلائل هامة:

• lib/: تحتوي على الشيفرة الرئيسية بدارت لتطبيقك
• android/: تحتوي على ملفات خاصة بنظام Android
• ios/: تحتوي على ملفات خاصة بنظام iOS
• web/: تحتوي على ملفات لتوزيع الويب
• pubspec.yaml: تحتوي على تبعيات المشروع والتكوينات

أهم ملف هو lib/main.dart، وهو نقطة دخول تطبيق فلاتر الخاص بك.

الخطوة 3: تشغيل تطبيق فلاتر الخاص بك

يمكنك تشغيل تطبيق فلاتر الخاص بك على منصات مختلفة:

للمحاكي iOS:

flutter run

للمحاكي Android:

flutter run

(تأكد من تشغيل المحاكي الخاص بك)

لإصدار الويب:

flutter run -d chrome

فهم أساسيات فلاتر: هيكل فلاتر والودجات

هيكلة فلاتر تستند إلى مفهوم الويدجات. كل شيء في فلاتر هو ودجة!

أنواع الويدجات في فلاتر

لدى فلاتر نوعان رئيسيان من الويدجات:

1. StatelessWidget: تستخدم لأجزاء واجهة المستخدم التي لا تتغير (ثابتة)
2. StatefulWidget: تستخدم لأجزاء واجهة المستخدم التي يمكن أن تتغير بناءً على تفاعل المستخدم أو تغييرات البيانات

دعونا نفهم التطبيق الافتراضي الذي أنشأه فلاتر:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'عرض فلاتر',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'الصفحة الرئيسية لعرض فلاتر'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('لقد ضغطت الزر هذا العدد من المرات:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'زيادة',
        child: Icon(Icons.add),
      ),
    );
  }
}

إعادة تحميل فورية: ميزة التطوير القوية لفلاتر

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

لاستخدام إعادة التحميل الفوري:

1. قم بإجراء تغييرات على الشيفرة الخاصة بك
2. احفظ الملف (Ctrl+S أو Cmd+S)
3. يفعل فلاتر تلقائيًا تغييراتك أثناء تشغيل التطبيق

يمكنك أيضًا تفعيل إعادة التحميل الفوري يدويًا عن طريق الضغط على "r" في الطرفية حيث يعمل تطبيق فلاتر.

تخصيص تطبيق فلاتر الخاص بك: تعديل واجهة فلاتر

دعونا نعدل تطبيق العداد الخاص بنا لفهم كيفية عمل واجهة فلاتر:

1. افتح lib/main.dart
2. قم بتغيير لون السمة من الأزرق إلى الأخضر:

theme: ThemeData(
  primarySwatch: Colors.green,
),

1. قم بتغيير نص العداد:

Text('لقد ضغطت الزر هذا العدد من المرات:'),

1. احفظ الملف وراقب كيف يتم تطبيق التغييرات على الفور عبر إعادة التحميل الفوري

موارد فلاتر: أين تتعلم المزيد عن تطوير فلاتر

يمتلك فلاتر وثائق ممتازة ومجتمعًا داعمًا. إليك بعض الموارد لمساعدتك على متابعة رحلتك مع فلاتر:

1. وثائق فلاتر الرسمية: دلائل شاملة ومراجع واجهة برمجة التطبيقات
2. كتاب فلاتر: وصفات للأنماط الشائعة في فلاتر
3. دليل فلاتر: دليل خطوة بخطوة للمبتدئين
4. جولة في لغة دارت: تعلم لغة البرمجة دارت
5. قناة فلاتر على يوتيوب: دروس فيديو وتحديثات

مجتمع فلاتر: الانخراط في نظام فلاتر البيئي

يمكن أن يؤدي الانخراط مع مجتمع فلاتر إلى تسريع تعلمك بشكل كبير:

1. انضم إلى مجتمع فلاتر على GitHub
2. شارك في خادم Discord الخاص بفلاتر
3. تابع فلاتر على تويتر
4. تصفح حزم فلاتر على pub.dev

خطوات فلاتر التالية: تعزيز مهاراتك في تطوير فلاتر

الآن بعد أن قمت بإعداد بيئة التطوير الخاصة بك وأنشأت أول تطبيق فلاتر لك، إليك بعض الخطوات التالية لتحسين مهاراتك:

1. تعلم دارت بعمق: سيساعدك فهم دارت في كتابة شيفرة فلاتر أفضل
2. استكشاف إدارة الحالة: تعرف على موفري الخدمة وBloc وRedux أو GetX
3. العمل مع حزم فلاتر: دمج الحزم التابعة لأطراف ثالثة لإضافة وظائف
4. ممارسة تطوير واجهة المستخدم: حاول إعادة إنشاء واجهات مستخدم معقدة من تطبيقات شائعة
5. بناء مشروع كامل: طبق معرفتك من خلال بناء تطبيق حقيقي

الخاتمة: تبدأ رحلتك مع فلاتر

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

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

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

تطوير سعيد مع فلاتر!