لو شغال Flutter 🚀، وهترفع App علي الـ Store او عندك Apps بالفعل، خلي بالك ان Google هتصنف برنامجك انه ليه bad behavior ⚠ لو الـ ANR عدي %0.47. اعرف ايه هو الـ ANR و 4 من ضمن الطرق عشان تتجنبه ⬇

الـ ANR (Android Not Responding) بيحصل لما الـ App بتاعك يحصله Freeze لمدة 5 ثواني، و بيطلع dialog للـ user يختار اذا كان يقفل الـ app او ينتظر، و طبعا دي من المواقف السيئة اللي ممكن تحصل في الـ app خاصة لو متكررة و دائما بتؤدي لخسارة جزء كبير من الـ user base بتاعتك من خلال انهم بيعملوا uninstall للـ app لو تكرر الـ freeze.

و Google في الـ documentation بتاعها بتقول:
Overall bad behavior: At least 0.47% of daily active users experience a user-perceived ANR across all device models.
و ده معناه انهم بيصنفوا الـ app انه ليه bad behavior لو الـ ANR Rate عدي الـ %0.47، يعني لو عندك 10,000 users استخدموا الـ App النهاردة، و 47 منهم طلعلهم ANR، يبقي الـ app ليه bad behavior.

💡 طبعا اسباب الـ ANR كتير وحلولهم اكتر، بس من اكثر الاسباب انتشارًا هو ان الـ UI بيكون complex ومحتاج يعمل render لـ widgets كتير في الـ screen و بيعملهم build كتير كل شوية وبسبب كده بيعمل block للـ Main Thread لفترة طويلة وبيحصل الـ ANR، لذلك دي 4 Tips هتساعدك تحسن الـ UI Performance في الـ app و تقلل الـ ANRs بدرجة كبيرة جدا لو طبقتها:

✅ 1. افصل كود الـ UI عن كود الـ Business Logic
بمعني انك مكتكبش الاكواد اللي بتعمل heavy work في الـ build() methods، لأن الـ build() بيتعملها call كل شوية عشان تعرض التغيرات اللي حصلت في الـ UI، الافضل انك تكتب كود الـ Business Logic في method لوحده و مش مربوطة مباشرة بالـ build() او انك تستخدم احد حلول الـ state management.

✅ 2. تجنب انك تعمل Single Widget و يكون كبير جدا و بيضم كذا جزء من الـ screen
عشان تتجنب انك تعمل build لجزء كبير من الـ widget tree، الافضل انك تقسم الـ screen ل sections او widgets صغيرة كل واحد فيهم مسؤول عن حاجة، بحيث انه لما يحصله update يتعمله build لوحده بدون اهدار للوقت والـ resources في عمل build للـ widgets التانية بدون حاجة.

✅ 3. استخدم const قبل كل constructor لأي widget مش هيتغير في الـ screen
و كل ما يكون متاح انك تستخدم الـ const، لأن const كأنك بتقول لـ Flutter و هو بيعمل rebuild للـ widget tree انه ميعملش build تاني للـ widget ده و هيسيبه زي ما هو بنفس حالته، و بكده هتوفر وقت و resources كتير جدا اثناء الـ build خاصة في الـ complex screens اللي فيها widgets كتير وبتفاصيل كتير.

✅ 4. استخدم StatelessWidget بدل الـ Function عشان تعمل Reusable Widget
لو عندك widget هتستخدمه كذا مرة في كذا مكان و هتخليه reusable، الأفضل انك تعمله StatelessWidget في Class بدل ما تعمله Function بيعمل return للـ widget، لأن الـ StatelessWidget اتصمم انه يعمل seamless integration مع الـ rendering pipeline، وغير كده انه بيكون فيه built-in caching techniques و ده بيحسن الـ performance. طبعًا الفرق مش هيبان في الـ widgets البسيطة والصغيرة، لكنه بيفرق جدا في الـ apps الكبيرة والـ complex screens.