فلاتر ودارت: رحلةٌ عبر الزمن ⏱️

Flutter:
* 2015: ولدت الفكرة في Google.
* 2017: تم إطلاق أول إصدار تجريبي.
* 2018: الإصدار الأول المُستقر.
* 2021: فلاتر 2.0 مع دعم سطح المكتب.
* اليوم: أصبحت Flutter منصّة ناجحة لتطوير التطبيقات مُتعدّدة المنصّات.

Dart:
* 2009: تم الإعلان عن Dart لأول مرة.
* 2011: إطلاق أول إصدار تجريبي.
* 2013: الإصدار الأول المُستقر.
* 2018: لعبت Dart دورًا رئيسيًا في Flutter.
* اليوم: Dart لغة برمجة قوية ومرنة مع مُستقبلٍ واعد.

مُميّزات Flutter و Dart:
* تطوير تطبيقاتٍ مُتعدّدة المنصّات باستخدام كود برمجي واحد.
* أداء سريع وسلس.
* واجهة مُستخدِم غنيّة وسهلة الاستخدام.
* مُجتمع كبير وداعم.
* مفتوحة المصدر ومجانيّة.

لماذا عليك تعلُّم Flutter و Dart؟
* لبناء تطبيقات جميلة وعالية الأداء.
* لتوفير الوقت والمال.
* للاستفادة من إمكانيات Flutter المتطورة.
* لأن مُستقبل Flutter و Dart يبدو مُشرقًا.

مُلاحظة: هذا مُجرّد مُلخّص مُختصَر. لمزيد من المعلومات، يُمكنك زيارة المواقع الرسميّة لـ Flutter و Dart:

- https://flutter.dev
- https://dart.dev

بعض من أهم المصادر للبدء بتعلُّم Dart و Flutter (عن تجربة):

- موقع Dart الرسمي: https://dart.dev

- موقع Flutter الرسمي: https://flutter.dev

- موقع سطر: https://satr.codes

- موقع Udemy (يودمي): https://udemy.com

- يوتيوب: https://youtube.com

أشهر بيئات التطوير أو الـ IDEs لتطوير تطبيقات Flutter و Dart وأهم ميّزاتها:

1. فيجوال أُستوديو كود (VS Code):
- انتشار واسع: VS Code هو واحد من أكثر الـ IDEs استخدامًا بين المُطوّرين على مستوى العالم، ليس فقط لتطوير Flutter ولكن أيضًا لمجموعةٍ مُتنوّعة من لغات البرمجة الأخرى.
- مُجتمع داعم: يتمتّع VS Code بمُجتمع كبير ونشط، مما يُسهّل العثور على حلول للمشاكل وتلقّي الدعم.
- إضافات قويّة: تتوفّر إضافات رسميّة وقويّة لِـ Flutter و Dart تُسهّل عمليّة التطوير.

2. أندرويد أُستوديو (Android Studio):
- دعم رسمي من Google: نظرًا لأن Flutter تم تطويره بواسطة Google، فإن Android Studio هو أحد الخيارات الرئيسية والمُفضّلة لتطوير تطبيقات Flutter.
- تكامُل شامل: يتميّز Android Studio بتكامُل شامل مع Flutter، ممّا يجعل إعداد البيئة وتطوير التطبيقات واختبارها أكثر سلاسة.
- شعبيّة واسعة بين مُطوّري Android: يُعتبَر Android Studio البيئة المُفضّلة لتطوير تطبيقات Android، وبالتالي هو خيار طبيعي لمُطوّري Flutter الذين لديهم خلفيّة في تطوير Android.

3. بيئة أو برنامج IntelliJ IDEA:
- إصدار المُجتمَع: IntelliJ IDEA Community Edition يُوفّر الكثير من الميّزات المجانيّة، وهو شائع بين المُطوّرين.
- دعم رسمي: لدى IntelliJ دعم رسمي من JetBrains لِـ Flutter و Dart، ممّا يجعلُها خيارًا قويًّا للمُطوّرين المُحترفين.

هذه البيئات الثلاث هي الأكثر شيوعًا واستخدامًا لتطوير تطبيقات Flutter و Dart، وذلك بسبب الميّزات القويّة والدعم الجيّد والتكامُل السلس مع أدوات التطوير المُختلِفة.

• بالنسبة لي، فأنا أُفضّل أندرويد أُستوديو (Android Studio) وذلك للميّزات الكبيرة والكثيرة فيه والدعم المُتواصل له وسهولة التعامُل معه وأتمتة أغلب المهام فيه، بالإضافة لدعمه الذكاء الاصطناعي (AI) بشكلٍ رسمي والذي يُساعدك كثيرًا في حل المشاكل البرمجيّة! (سوف يتم التطرُّق لهذه الميّزة لاحقًا).

باستخدام Flutter، يُمكنك تطوير تطبيقات مُتعدّدة المنصّات باستخدام كود برمجي واحد. تشمل المنصّات التي يُمكنك استهدافها باستخدام Flutter:

1. أندرويد (Android): تطوير تطبيقات لنظام التشغيل Android.
2. نظام iOS: تطوير تطبيقات لنظام التشغيل iOS.
3. الويب (Web): تطوير تطبيقات يمكن تشغيلها على مُتصفّحات الويب.
4. ويندوز (Windows): تطوير تطبيقات سطح المكتب لنظام التشغيل Windows.
5. نظام macOS: تطوير تطبيقات سطح المكتب لنظام التشغيل macOS.
6. لينكس (Linux): تطوير تطبيقات سطح المكتب لنظام التشغيل Linux.
7. الأجهزة المُضمَّنة أو المُدمَجَة (Embedded devices): يُمكن استخدام Flutter لتطوير تطبيقات للأجهزة المُضمّنة (Embedded devices)، مثل أجهزة التلفزيون الذكيّة وأجهزة إنترنت الأشياء (IoT).

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

خارطة طريق مُتكاملة ومُحدّثة لعام 2024 وخطوة بخطوة كذلك كي تُصبِح مُطوّر Flutter 💪🏼:

- https://roadmap.sh/flutter

في Flutter، هُناك نوعان رئيسيّان من الويدجتس (Widgets): Stateless Widgets و Stateful Widgets. الفرق الرئيسي بينهُما يكمُن في القُدرَة على الاحتفاظ بالحالة (State) وتحديثها.

Stateless Widgets
ماهيتُها:
- هي ويدجتس غير قابلة للتغيير (immutable)، بمعنى أنه لا يُمكنها الاحتفاظ بحالة داخليّة يُمكن تغييرها بعد إنشائِها.
- يتم تعريفُها باستخدام StatelessWidget، وهي مثاليّة للويدجتس التي لا تحتاج إلى إدارة حالة مُتغيّرة، مثل النصوص الثابتة والأيقونات والأزرار البسيطة.

استخداماتُها:
- يتم استخدامُها عندما يكون الويدجت ثابتًا ولا يتغيّر مع مرور الوقت أو مع تفاعُل المُستخدِم.
- أمثلة على Stateless Widgets تشمل: النصوص الثابتة، الأيقونات، الأزرار غير التفاعُليّة.

كيفيّة الإنشاء:

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!');
  }
}

Stateful Widgets
ماهيتُها:
- هي ويدجتس قابلة للتغيير (mutable)، بمعنى أنها يُمكنها الاحتفاظ بحالة داخليّة يُمكن تغييرها.
- يتم تعريفُها باستخدام StatefulWidget، وتُرافقُها فئة أُخرى تُمثّل الحالة (State) والتي تتغيّر بناءً على تفاعُل المُستخدِم أو مع مرور الوقت.

استخداماتُها:
- يتم استخدامُها عندما يحتاج الويدجت إلى تغيير مظهره أو سلوكه استجابةً لتفاعُلات المُستخدِم أو البيانات المُتغيّرة.
- أمثلة على Stateful Widgets تشمل: حقول الإدخال (مثل TextField)، الأزرار التفاعُليّة، القوائم القابلة للتمرير.

كيفيّة الإنشاء:

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Counter: $_counter'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

الفُروقَات الرئيسيّة
1. القُدرَة على الاحتفاظ بالحالة:
   - ويدجتس Stateless: لا تحتفظ بحالة داخليّة، وبالتالي لا يُمكنها التغيير بعد إنشائِها.
   - ويدجتس Stateful: تحتفظ بحالة داخليّة يُمكن تغييرهُا، ممّا يسمح بتحديث الويدجت وإعادة بنائِه.

2. الأداء:
   - ويدجتس Stateless: عادةً ما تكون أبسط وأسرع من حيثُ الأداء لأنّها لا تحتاج إلى إدارة حالة.
   - ويدجتس Stateful: تتطلّب موارِد أكثر لإدارة الحالة وتحديث الويدجت عند تغيير الحالة.

متى تستخدِم كُل نوع؟
- ويدجتس Stateless: استخدمها للويدجتس أو الواجهات التي لا تحتاج إلى تغيير مظهرها أو سلوكها بعد الإنشاء، مثل العناصر الثابتة في واجهة المُستخدِم.
- ويدجتس Stateful: استخدمها عندما يكون لديك عناصر تحتاج إلى التفاعُل مع المُستخدِم أو تتغيّر ديناميكيًا، مثل نماذج الإدخال، أو عناصر القائمة التفاعُليّة، أو أي عُنصر يتغيّر بناءً على تفاعُل المُستخدِم.

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

🟢 معلومة: ويدجت Stateless و Stateful هي في الأصل كلاسات Classes، لكن لها خصائِصُها ولها الدوال الخاصّة بها، مثل:

@override
  Widget build(BuildContext context) {
    return ...
  }

لكن تُسمّى بِـ Widget لأنها في النهاية عبارة عن واجهة تَظهَر للمُستخدِم.

🟢 ويدجتس Stateless و Stateful هي من الأساسيّات التي لا بُد من تعلُّمُها أثناء تعلُّم Flutter، لمزيد من المعلومات:
- https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html
- https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html

إدارة الحالة (State Management): هي عمليّة التحكُّم في كيفيّة تفاعُل البيانات وتحديثها داخل التطبيق وكيفيّة انعكاس تلك التغييرات على واجهة المُستخدِم. تُعتبر إدارة الحالة من العناصر الأساسيّة في Flutter لتطوير تطبيقات فعّالة وقابلة للصيانة، حيث تَضمَن أن تَظَل البيانات مُتزامنة وأن تعكس واجهة المُستخدِم هذه البيانات بشكلٍ صحيح.

هُناك عِدّة خيارات وأدوات/مكتبات لإدارة الحالة في Flutter، منها:

1. setState:
   - الأُسلوب الأساسي والمُبسّط لإدارة الحالة.
   - يُستخدَم لإعادة بناء الواجهة عند تغيير الحالة.
- يُستخدَم مع Stateful Widgets.

2. InheritedWidget و InheritedModel:
   - تُتيح مُشاركة البيانات عبر جُزء كبير من شجرة الـ Widget أو الـ Widget Tree.
   - تُستخدَم أساسًا لبناء أدوات إدارة حالة مُخصّصة.

3. Provider:
   - المكتبة الأكثر شيوعًا في الاستخدام لغرض إدارة الحالة.
   - تعتمِد على InheritedWidget وتُوفّر طريقة سهلة وفعّالة لإدارة الحالة.

4. Riverpod:
   - مكتبة حديثة ومُطوّرة من Provider.
   - تُوفّر ميّزات إضافيّة مثل الأمان وتجنُّب المشاكل الشائعة في Provider.

5. Bloc (Business Logic Component):
   - مكتبة تُوفّر نمط تصميم Bloc.
   - تفصِل بين منطق العمل والواجهة، وتَستخدِم تيّارات البيانات (Streams).

6. Cubit:
   - جُزء من مكتبة Bloc.
   - تُعتبَر نُسخة مُبسّطة من Bloc، يَسهُل استخدامُها في بعض الحالات.

7. Redux:
   - مكتبة لإدارة الحالة تعتمِد على مبدأ الـ Flux.
   - تُستخدَم في تطبيقات كبيرة حيث يكون من المُهم تتبُّع حالة التطبيق بشكلٍ دقيق.

8. GetX:
   - مكتبة شامِلة تُوفّر إدارة الحالة، توجيه الصفحات (Routing)، والاعتماديات (Dependency Injection).
   - تُركّز على البساطة والأداء.

9. MobX:
   - مكتبة تعتمِد على البرمجة التفاعُليّة.
   - تَستخدِم المفاهيم مثل المُلاحظات (Observables) وردود الأفعال (Reactions).

10. ScopedModel:
    - مكتبة قديمة نسبيًّا لإدارة الحالة.
    - تُعتبَر مُبسّطة لكنّها أقل شيوعًا مُقارنةً في Provider.

يُمكن البحث عن المكتبات في الأعلى والبدء في استخدامِها عن طريق الموقع الرسمي لمكتبات Dart و Flutter:

- https://pub.dev

اختيار الأداة المُناسبة يعتمِد على تعقيد التطبيق ومُتطلّباته، وكذلك تفضيلات المُطوّر وأُسلوب العمل المُفضّل لديه.

🟢 بالنسبة لي، أُفضّل البدء في تعلُّم واستخدام مكتبة Riverpod لإدارة الحالة؛ لسهولتها وجودتها وحداثتها وتقديمها كذلك لاختصارات كثيرة أثناء البرمجة.
🟢 تعلُّم مبدأ الـ State Management أو إدارة الحالة في Flutter من الأساسيّات، وسيتم لاحقًا نشر دورات ودروس مُفيدة للبدء في تعلُّم Flutter وخاصةً باستخدام Riverpod.

مكتبة Riverpod من أفضل المكتبات في Flutter لإدارة الحالة (State Management)؛ وذلك لسهولتها وجودتها وحداثتها وتقديمها كذلك لاختصارات كثيرة أثناء البرمجة. تستطيع البدء بتعلُّمها من الموقع الرسمي لها:

- https://riverpod.dev/

وهذه مَقالة مُمتازة تختصر عليك الكثير في تعلُّمها:

- https://codewithandrea.com/articles/flutter-state-management-riverpod/

وهذه كذلك دورات للبدء بتعلُّم Flutter مع استخدام مكتبة Riverpod في إدارة الحالة (المستوى من مُتوسّط إلى مُتقدّم - أنصح بتعلُّم الأساسيّات أولًا):

- https://codewithandrea.com/courses/all-courses-bundle/

ولكي تتعلّم بناء التطبيقات بشكلٍ صحيح (Presentation Layer, Application Layer, Domain Layer, و Data Layer)، خاصّةً باستخدام Riverpod، أنصحك بقراءة هذه المقالة:

- https://codewithandrea.com/articles/flutter-app-architecture-riverpod-introduction/

كتاب الطبخ الخاص بِـ Flutter!

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

- https://docs.flutter.dev/cookbook