- بواسطة x32x01 ||
لما تبدأ مع Flutter، أكيد هتقع في فخ مشهور:
Code:
Scaffold(
body: Column(
children: [
Row(
children: [
Container(
child: Text('Hello'),
),
],
),
],
),
); مش فاهم أي Widget بدأت فين وانتهت فين!
ده اللي بنسميه Widget Hell أو جحيم الويتجت
الحل: Extract Widget
الميزة اللي فرقت معايا جدًا هي Extract Widget في VS Code.بدل ما الكود كله يبقى في فايل واحد 500 سطر، ممكن بضغطة زرار تفصل أي جزء من الكود لـ Widget مستقلة.
Code:
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؟
نصيحة للمبتدئين
"قسم تسد"!ماتخليش الصفحة كلها في ملف واحد كبير.
قسم الكود على Widgets صغيرة، وهنشوف الكود أنضف وأسهل في التعديل وDebugging