ما الفرق بين StatelessWidget و StatefulWidget؟

Question

Accepted Answer

يحتوي Flutter على نوعين أساسيين من الـ widgets: **StatelessWidget** (غير قابل للتغيير، بدون حالة داخلية تتغير) و **StatefulWidget** (يمكنه الاحتفاظ بحالة قابلة للتغيير وتحديثها، وإعادة البناء عند تغيير الحالة). اختيار النوع الصحيح هو أمر أساسي لبناء واجهات المستخدم في Flutter. ## StatelessWidget — بدون حالة متغيرة ```dart // a StatelessWidget: just describes UI based on its inputs (immutable, no internal state) class Greeting extends StatelessWidget { final String name; const Greeting(this.name); @override Widget build(BuildContext context) { return Text('Hello, $name'); // UI depends only on inputs, never changes itself } } // → use for UI that doesn't change on its own (static content, displays based on inputs) ``` ## StatefulWidget — يحتوي على حالة قابلة للتغيير ```dart // a StatefulWidget: holds STATE that can change → rebuilds the UI when it does class Counter extends StatefulWidget { @override State createState() => _CounterState(); } class _CounterState extends State { int count = 0; // mutable STATE @override Widget build(BuildContext context) { return Column(children: [ Text('Count: $count'), ElevatedButton( onPressed: () => setState(() => count++), // setState → rebuild with new state child: Text('Increment'), ), ]); } } ``` ## setState — المفتاح الأساسي في StatefulWidget ```text → setState(() { ... }) tells Flutter the state CHANGED → triggers a REBUILD (build() runs again with the new state, updating the UI) → WITHOUT setState, changing a variable won't update the UI → StatefulWidget = widget config (immutable) + a State object (holds mutable state) ``` ## الاختيار ```text STATELESS → UI based purely on inputs; doesn't change itself (most widgets; simpler) STATEFUL → needs to hold/change internal state over time (counters, forms, toggles, animations, anything interactive that changes) → Prefer Stateless when possible (simpler); use Stateful when you need changing state. ``` ## لماذا هذا مهم فهم الفرق بين StatelessWidget و StatefulWidget هو أمر أساسي في تطوير Flutter لأن اختيار النوع الصحيح ضروري لبناء واجهات مستخدم تعمل بشكل صحيح، لذلك فهو معرفة أساسية يجب أن يعرفها كل مطور. التمييز بين **StatelessWidget** (غير قابل للتغيير، يصف واجهة المستخدم بناءً على مدخلاته فقط، لا يتغير بمفرده) و **StatefulWidget** (يحتفظ بحالة قابلة للتغيير يمكن أن تتغير، وإعادة بناء واجهة المستخدم عند حدوث ذلك) هو أحد أول وأهم المفاهيم في Flutter، ويحدد كيفية بناء أي widget. فهم أن **StatelessWidget** مناسب لواجهة المستخدم التي لا تتغير بنفسها (المحتوى الثابت، العروض بناءً على المدخلات — معظم الـ widgets، وأبسط) بينما **StatefulWidget** ضروري لأي شيء له حالة داخلية متغيرة (العدادات، النماذج، مفاتيح التبديل، العناصر التفاعلية) هو أمر ضروري للاختيار بشكل صحيح. الأهم من ذلك، فهم **setState** — الآلية التي تخبر Flutter بأن الحالة قد تغيرت، مما يؤدي إلى إعادة بناء حتى تتحدث واجهة المستخدم (وأنه بدونها، تغيير متغير لن يحدث تحديث في واجهة المستخدم، وهذا خطأ شائع جداً بين المبتدئين) — هو أمر أساسي لجعل StatefulWidgets تعمل. فهم أن StatefulWidget يجمع بين تكوين widget غير قابل للتغيير وكائن State منفصل يحتفظ بالحالة القابلة للتغيير يوضح هيكله. التوجيه الذي يفضل **اختيار StatelessWidget عندما يكون ذلك ممكناً** (أبسط) واستخدام StatefulWidget فقط عندما تكون هناك حاجة لتغيير الحالة يعكس أفضل الممارسات. بما أن كل widget في Flutter تقريباً تقوم ببنائه هو أحد هذين النوعين واختيار الخيار الصحيح (واستخدام setState بشكل صحيح) ضروري لبناء واجهات مستخدم وظيفية وتفاعلية، فإن فهم StatelessWidget مقابل StatefulWidget — الفرق بينهما، متى تستخدم كل واحد، والدور الحاسم لـ setState — هو معرفة أساسية في Flutter، أحد أهم المفاهيم الأساسية في تطوير Flutter التي يجب على كل مطور Flutter أن يفهمها لبناء واجهات مستخدم تعمل بشكل صحيح.