- بواسطة x32x01 ||
دي شوية نصائح هتساعدك تتجنب الأخطاء الشائعة وتستخدم الـ Widgets بالشكل الأنسب في تطبيقك Flutter. كل Widget له دوره، واختيارك للـ Widget الصح بيحسن الكود ويخلي التطبيق أخف وأكتر احترافية.
1-لو عندك صفحة في تطبيقك وفيها حاجات كتير (Widgets)، ومحتاج جزء صغير يتغير (زي Button بيتغير لونه أو رقم بيتعدل)، مش منطقي إنك تحول الصفحة كلها لـ StatefulWidget.
ليه؟ لأن StatefulWidget بيعمل Rebuild لكل الشاشة حتى لو جزء صغير اللي عايز يتغير، وده ممكن يبطّأ الأداء لو عندك Widgets كتير.
الحل: StatefulBuilder
StatefulBuilder بيحل المشكلة دي. هو بيخليك تغير جزء معين في الصفحة من غير ما تعمل Rebuild لكل الصفحة. يعني لو عندك Button أو Text بس اللي عايز يتغير، تقدر تتحكم فيهم بس من غير ما تمسّ باقي الشاشة.
2-ال Padding وSizedBox
كتير بنشوف ناس بتحط مسافات بين Widgets باستخدام SizedBox وتحدد height أو width، وده معناه إنك بتستخدم SizedBox كأنه مسافة فاضية. بس لو عايز تضيف مسافة جوه أو حوالين الـ Widget، يبقى الأفضل تستخدم Padding، لأن ده هو الغرض الأساسي من Padding، وده هيخلي الكود أوضح ومقروء أكتر.
مثال: بدل ما تعمل SizedBox(height: 10) بين عنصرين، حطهم جوّا Padding عشان تحافظ على ترتيب الكود وأناقة التصميم.
3-ال SetState وValueNotifier
لو بتحتاج تعمل تحديثات كتير في الواجهة مع تكرار setState()، ده بيأثر على الأداء وبيبطأ التطبيق لو التحديثات كتير ومتكررة. الحل الأفضل هنا يكون إنك تستخدم ValueNotifier أو حتى ChangeNotifierProvider، وده بيدي كفاءة أعلى وتحديثات موجهة للـ Widgets المحددة من غير ما يعيد بناء كل عناصر الصفحة كل مرة.
مثال: استخدم ValueListenableBuilder مع ValueNotifier لو عندك تغيرات بسيطة زي رقم العداد (counter) أو حالة زرار.
4-ال Expanded وFlexible
لما تستخدم Row أو Column وعايز توزع العناصر بشكل متساوي أو بنسبة معينة، بيبقى مغري تستخدم Expanded طول الوقت. لكن Expanded بياخد كل المساحة المتاحة ويجبر العناصر التانية.
عشان كده، لو عايز تحكم في توزيع المساحة بنسب معينة أو لو مش عايز العنصر ياخد المساحة كلها، استخدم Flexible مع flex، لأن ده بيخليك تتحكم في النسبة اللي ياخدها كل عنصر بدون ما تضغط على بقية العناصر.
5-ال FutureBuilder وStreamBuilder
الفرق بين الـ FutureBuilder وStreamBuilder واضح لكن أوقات ناس كتير بتخلط بينهم. لو بتتعامل مع بيانات بتيجي مرة واحدة زي بيانات الـ API، يبقى استخدم FutureBuilder لأنه مخصص للحالة دي. أما لو البيانات بتيجي بشكل مستمر أو في تدفق زي تحديثات الشات أو الموقع الجغرافي، يبقى استخدم StreamBuilder. كده بتستغل كل Widget في مكانه الصح.
6-ال Visibility وOpacity و Offstage
لما تحب تخفي Widget بس تكون لسه محتفظ بيه عشان تسترجعه بعدين، ممكن تستخدم Opacity وتخليه 0، بس ده غلط شوية لأنه بيفضل يحتفظ بمكان العنصر حتى لو مختفي. لو عايز تخفيه وتحرر مكانه، يبقى الأحسن تستخدم Visibility. أما لو عايز تزيله تماماً من العرض بس تفضل محتفظ بيه في الشجرة، استخدم Offstage. كده بتستغل المساحة والأداء بشكل أفضل.
7-ال SafeArea وPadding
لو بتحط مسافات حوالين العناصر لتفادي الاصطدام مع الحواف أو الـ Notch، ممكن ساعتها تستخدم SafeArea بدل ما تعمل Padding يدوي. الـ SafeArea بيضبط مكان الـ Widget بحيث يبقى بعيد عن الحواف الحساسة على كل الأجهزة بشكل تلقائي، وده بيريّحك إنك تفكر في أبعاد الأجهزة المختلفة.
1-لو عندك صفحة في تطبيقك وفيها حاجات كتير (Widgets)، ومحتاج جزء صغير يتغير (زي Button بيتغير لونه أو رقم بيتعدل)، مش منطقي إنك تحول الصفحة كلها لـ StatefulWidget.
ليه؟ لأن StatefulWidget بيعمل Rebuild لكل الشاشة حتى لو جزء صغير اللي عايز يتغير، وده ممكن يبطّأ الأداء لو عندك Widgets كتير.
الحل: StatefulBuilder
StatefulBuilder بيحل المشكلة دي. هو بيخليك تغير جزء معين في الصفحة من غير ما تعمل Rebuild لكل الصفحة. يعني لو عندك Button أو Text بس اللي عايز يتغير، تقدر تتحكم فيهم بس من غير ما تمسّ باقي الشاشة.
2-ال Padding وSizedBox
كتير بنشوف ناس بتحط مسافات بين Widgets باستخدام SizedBox وتحدد height أو width، وده معناه إنك بتستخدم SizedBox كأنه مسافة فاضية. بس لو عايز تضيف مسافة جوه أو حوالين الـ Widget، يبقى الأفضل تستخدم Padding، لأن ده هو الغرض الأساسي من Padding، وده هيخلي الكود أوضح ومقروء أكتر.
مثال: بدل ما تعمل SizedBox(height: 10) بين عنصرين، حطهم جوّا Padding عشان تحافظ على ترتيب الكود وأناقة التصميم.
3-ال SetState وValueNotifier
لو بتحتاج تعمل تحديثات كتير في الواجهة مع تكرار setState()، ده بيأثر على الأداء وبيبطأ التطبيق لو التحديثات كتير ومتكررة. الحل الأفضل هنا يكون إنك تستخدم ValueNotifier أو حتى ChangeNotifierProvider، وده بيدي كفاءة أعلى وتحديثات موجهة للـ Widgets المحددة من غير ما يعيد بناء كل عناصر الصفحة كل مرة.
مثال: استخدم ValueListenableBuilder مع ValueNotifier لو عندك تغيرات بسيطة زي رقم العداد (counter) أو حالة زرار.
4-ال Expanded وFlexible
لما تستخدم Row أو Column وعايز توزع العناصر بشكل متساوي أو بنسبة معينة، بيبقى مغري تستخدم Expanded طول الوقت. لكن Expanded بياخد كل المساحة المتاحة ويجبر العناصر التانية.
عشان كده، لو عايز تحكم في توزيع المساحة بنسب معينة أو لو مش عايز العنصر ياخد المساحة كلها، استخدم Flexible مع flex، لأن ده بيخليك تتحكم في النسبة اللي ياخدها كل عنصر بدون ما تضغط على بقية العناصر.
5-ال FutureBuilder وStreamBuilder
الفرق بين الـ FutureBuilder وStreamBuilder واضح لكن أوقات ناس كتير بتخلط بينهم. لو بتتعامل مع بيانات بتيجي مرة واحدة زي بيانات الـ API، يبقى استخدم FutureBuilder لأنه مخصص للحالة دي. أما لو البيانات بتيجي بشكل مستمر أو في تدفق زي تحديثات الشات أو الموقع الجغرافي، يبقى استخدم StreamBuilder. كده بتستغل كل Widget في مكانه الصح.
6-ال Visibility وOpacity و Offstage
لما تحب تخفي Widget بس تكون لسه محتفظ بيه عشان تسترجعه بعدين، ممكن تستخدم Opacity وتخليه 0، بس ده غلط شوية لأنه بيفضل يحتفظ بمكان العنصر حتى لو مختفي. لو عايز تخفيه وتحرر مكانه، يبقى الأحسن تستخدم Visibility. أما لو عايز تزيله تماماً من العرض بس تفضل محتفظ بيه في الشجرة، استخدم Offstage. كده بتستغل المساحة والأداء بشكل أفضل.
7-ال SafeArea وPadding
لو بتحط مسافات حوالين العناصر لتفادي الاصطدام مع الحواف أو الـ Notch، ممكن ساعتها تستخدم SafeArea بدل ما تعمل Padding يدوي. الـ SafeArea بيضبط مكان الـ Widget بحيث يبقى بعيد عن الحواف الحساسة على كل الأجهزة بشكل تلقائي، وده بيريّحك إنك تفكر في أبعاد الأجهزة المختلفة.