تنظيف الكود في Flutter وحل Widget Hell بسرعة

بتتوه وسط الأقواس؟ الحل السحري للكود النضيف في Flutter!
لما تبدأ مع Flutter، أكيد هتقع في فخ مشهور:

Scaffold(
  body: Column(
    children: [
      Row(
        children: [
          Container(
            child: Text('Hello'),
          ),
        ],
      ),
    ],
  ),
);

وبعدين فجأة تلاقي نفسك قدام "هرم" من الأقواس في آخر الملف
مش فاهم أي Widget بدأت فين وانتهت فين!
ده اللي بنسميه Widget Hell أو جحيم الويتجت

​

الحل: Extract Widget​

الميزة اللي فرقت معايا جدًا هي Extract Widget في VS Code.
بدل ما الكود كله يبقى في فايل واحد 500 سطر، ممكن بضغطة زرار تفصل أي جزء من الكود لـ Widget مستقلة.

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          MyCustomButton(),
          MyCustomCard(),
        ],
      ),
    );
  }
}

class MyCustomButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {},
      child: Text('Click Me'),
    );
  }
}

class MyCustomCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text('Hello Widget!'),
      ),
    );
  }
}

---

​

ليه لازم تعمل Extract Widget؟​

كود أنضف الـ build method بتبقى رايقة وسهلة القراءة
سهولة التعديل لو عايز تعدل زرار أو Card تعدله في مكان واحد ويأثر على كل الاستخدامات
أداء أفضل Flutter بيتعامل بذكاء مع الـ const widgets المفصولة، وده بيخلي الأداء أسرع

​

نصيحة للمبتدئين​

"قسم تسد"!
ماتخليش الصفحة كلها في ملف واحد كبير.
قسم الكود على Widgets صغيرة، وهنشوف الكود أنضف وأسهل في التعديل وDebugging