الفرق بين stateless و stateful في flutter

لفهم الفرق بين أنواع الـwidgets علينا أولاً فهم ماهيتها ومكوناتها.
كل عنصر يظهر للمستخدم هو عبارة عن widget مثل نص، صورة، حقل إدخال...الخ.
حيث يصف الـwidget سلوك وشكل العنصر في الشاشة، على سبيل المثال عند إضافة نص ومحاذاته في المنتصف نستخدم الـtext widget و الـcenter widget كالتالي:

Center(// widget1
          child: Text('hello',style:TextStyle(color:Colors.black)), // widget2
        )

لاحظ أن الـ widget هو object يصف ويحدد شكل العنصر في الشاشة.
بعد فهم ماهية الـwidget سنفرق بين الـstateless widget والـstateful widget.

• stateful widget: هو عبارة عن عنصر يحتوي على حالة أي يمكن حفظ بيانات فيه ويمكنه تغييرها وإعادة بناء/رسم نفسه أثناء التشغيل عن طريق الدالة setState.
  مثال عليه:

class FavoriteWidget extends StatefulWidget { //القسم الأول الخاص بالعنصر
  @override
  _FavoriteWidgetState createState() => _FavoriteWidgetState();
}
class _FavoriteWidgetState extends State<FavoriteWidget> { // القسم الثاني الخاص بحالة العنصر
String msg = “hello”; // يمكن تعريف متغيرات وتغيير قيمتها أثناء تشغيل التطبيق
  @override
  Widget build(BuildContext context) { // الدالة الخاصة ببناء شكل العنصر
	return Text(‘$msg’); // نرجع نصاً يحمل قيمة المتغير المعرف مسبقاً
	}
}

• stateless widget: هو عنصر ليس لديه حالة ولا يمكن تغيير بياناته أثناء تشغيل التطبيق إلا عن طريق إعادة تعريفه مرة أُخرى ببيانات مختلفة.
  مثال عليه:

class MyWidget extends StatelessWidget { // يتكون من قسم واحد فقط خاص بالعنصر وليس له حالة
final String msg = “hello”; // لاحظ تعريف المتغير يجب أن يكون نهائي ولا يمكن تغييره أثناء التشغيل
  @override
  Widget build(BuildContext context) { // دالة بناء شكل العنصر
    return Text(‘$msg’);
  }
}

إذاً نستخدم stateful مع العناصر التي تعتمد على بيانات متغيرة وتحتاج لإعادة رسم نفسها على الشاشة أثناء التشغيل.
ونستخدم stateless في العناصر الثابتة التي لا نحتاج لتغييرها أو التعديل عليها أثناء التشغيل.