تنظيف الكود في 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؟​

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

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

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