في 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

من أفضل القنوات على اليوتيوب لتعلُّم تصميم الواجهات والأنيميشن وتحويل التصاميم إلى واجهات فعليّة وتطبيقات Flutter باحترافيّة عالية:

- https://youtube.com/@theflutterway

من أفضل وأشهر المواقع التي تُقدّم خدمة BaaS أو Backend as a Service هو موقع Firebase من Google. الغرض من استخدام مثل هذه المواقع أو الخدمات هو تسريع عمليّة التطوير والتركيز على بناء واجهة وتجربة المُستخدِم بدلًا من بناء الخادم وتطوير كُل البُنية التحتيّة من الصفر.

موقع Firebase يُقدّم خدمات كثيرة ومُتنوّعة، مثل:
Authentication, NoSQL Databases, Data Storage, Cloud Functions, Notifications, Analytics, Test Labs
وغيرها الكثير.

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

- https://firebase.google.com/

من أفضل القنوات على اليوتيوب لتعلُّم Flutter وكيفيّة تطبيق بعض الويدجتس (Widgets) المشهورة، وغيرها الكثير:

- https://youtube.com/@fluttermapp

مكتبة flex_color_scheme في Flutter تُسهّل إنشاء ثيمات مُتوافقة مع تصميم Material Design. تُقدم المكتبة ميّزات مُتقدمة مثل تخصيص الألوان ودعم تصميم Material 2 و Material 3، بالإضافة إلى قوالب جاهزة يُمكن استخدامها وتخصيصها.

من أفضل المكتبات التي استخدمتها لبناء تطبيقات Flutter بواجهاتٍ جميلة وبشكلٍ سريع!

🟢 لتجربة خصائص وميّزات المكتبة قبل استخدامها:

- https://rydmike.com/flexcolorscheme/themesplayground-latest

🟢 رابط المكتبة:

- https://pub.dev/packages/flex_color_scheme

#مكتبات_أعجبتني

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

🟢 لتجربة خصائص وميّزات المكتبة قبل استخدامها:

- https://rydmike.com/flexcolorpicker

🟢 رابط المكتبة:

- https://pub.dev/packages/flex_color_picker

#مكتبات_أعجبتني

مكتبة group_button في Flutter تُتيح لك إنشاء مجموعة من الأزرار بسهولة، مثل أزرار الـ Radio وأزرار الـ Checkbox وغيرها. تُوفّر المكتبة أدوات لتخصيص مظهر ووظائف الأزرار بشكلٍ احترافي.

🟢 رابط المكتبة:

- https://pub.dev/packages/group_button

#مكتبات_أعجبتني