🔥تحسين أداء تطبيقات Flutter باستخدام
Keys
سر لا يعرفه الكثيرون

أحد المفاهيم المهمة اللي العديد من المطورين لا ينتبهون لها في Flutter هو Keys. استخدام الـ Keys بشكل صحيح يمكن أن يحل مشاكل الأداء والمشاكل الغامضة في بناء واجهة المستخدم.

✅️ ما هي Keys في Flutter؟
الـ Keys تساعد Flutter في التمييز بين widgets المختلفة عند حدوث تغييرات كبيرة في الواجهة. عند استخدام keys، نضمن أن الـ widgets تتحرك أو تتغير بناءً على هويتها الفريدة، وليس فقط بناءً على ترتيبها في الواجهة.

✅️ لماذا نستخدم Keys؟

✔️ الحفاظ على حالة الواجهة: عند إعادة ترتيب الـ widgets داخل الـ widget tree، استخدام keys يضمن أن حالة الـ widgets لا تضيع.

✔️ تحسين الأداء: استخدام keys بشكل صحيح يقلل من إعادة بناء أجزاء كبيرة من الواجهة، مما يحسن من الأداء.

✔️ حل مشاكل إعادة ترتيب العناصر: على سبيل المثال، إذا كان لديك ListView وتقوم بإضافة أو حذف عناصر، من دون الـ keys قد يقوم Flutter بإعادة بناء كل العناصر بدلاً من التركيز على العناصر التي تغيرت فقط.

✅️ أنواع الـ Keys:

1️⃣ GlobalKey:

هذا النوع من keys

يمنح الـ widget هوية فريدة على مستوى التطبيق بأكمله، وليس فقط داخل شجرة معينة. نستخدمه عندما نحتاج للوصول إلى حالة الـ widget من أي مكان في التطبيق أو عند التنقل بين الشاشات.


final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text('Using GlobalKey'),
),
body: Center(
child: Text('Hello World'),
),
);
}

2️⃣ UniqueKey:

هذا الـ Key فريد لكل مرة يتم استدعاؤه فيها. مفيد عندما تحتاج إلى أن يقوم Flutter بإعادة بناء الـ widget في كل مرة، حتى إذا لم يتغير موقعه في الـ widget tree.


List<Widget> items = [
Container(
key: UniqueKey()
, color: Colors.red, height: 50
),
Container(
key: UniqueKey(),
color: Colors.blue, height: 50),
];

3️⃣ ValueKey:

هذا النوع يكون مفيدًا عندما يكون لديك قيمة معينة تحدد بها تميز الـ widgets.

على سبيل المثال، ListView

وكل عنصر لديه id أو name فريد.


List<String> names =
['Mahmoud', 'Ahmed', 'Usama'];

@override
Widget build(BuildContext context) {
return ListView(
children: names.map((name) {
return ListTile(
key: ValueKey(name),
title: Text(name),
);
}).toList(),
);
}




https://www.linkedin.com/posts/mazap64_flutter-dart-activity-7255194849077854208-HQ1C?utm_source=share&utm_medium=member_android