لما تعتمد Widget-Method (دالة ترجع ويدجت) بدل Widget-Class (كلاس يورث من StatefulWidget/StatelessWidget)، بتصير عندك مشاكل أداء للأسباب التاليه:
1️⃣ ما تستخدم const
الدوال ما تقدر تحط const قبل إنشاء الودجت، فيصير كل مرة rebuild حتى لو الودجت ثابتة أو الـ state ما تغيّرت.
بالمقابل، لما تكتب كلاس وتستخدم const MyWidget()، Flutter يخزّنها في الـ Element tree وما يعيد بنائها إلا لو تغيّرت فعلاً.
2️⃣ تمرير أو استخدام الـ BuildContext داخل الدالة
لما تعدي الـ context من دالة لدالة، ومع تزايد الـ Widget Tree، ممكن تواجه أخطاء مثل:
Bad state management: context.read() أو context.watch() يطلع لك null أو “dependOnInheritedWidgetOfExactType” راجع null.
Dialogs: showDialog(context: ctx)
ممكن يرمي error إن الـ context ما عاد mounted لو المستخدم نقر زر رجوع بعد ما يفتح الديالوج.
الحل: اكتب Widget-Class مع const
❌ طريقة Method Widget (تخليك ما تقدر تستخدم const)
Widget myButton(BuildContext context) {
return ElevatedButton(
onPressed: () => context.read<MyBloc>().add(DoSomething()),
child: Text('اضغط'),
);
}
✅ طريقة Class Widget + const
class MyButton extends StatelessWidget {
const MyButton({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () => context.read<MyBloc>().add(DoSomething()),
child: const Text('اضغط'),
);
}
}
الميزة:
تقدر تستخدم const MyButton() وين ما تريده → يقلّل من rebuilds الغير ضرورية.
الـ BuildContext متعلق بالعنصر نفسه (element) وما ينشال من غير قصد.
الخلاصة :
- اعتمد على Classes بدل Functions للWidgets حتى تستفيد من const.
- خلي الدوال البسيطة widgets صغيرة جدًا، مثل الDivider لو بتعيد إستخدامه
- تجنب تمرير الـ context لبعيد: كل ما كان context قريب من مكان الاستخدام، قلت الأخطاء.
