Container

الحاوية الأساسية Container

Container ويدجت متعدّد الأغراض: يضبط الحجم واللون والحواف والحشو والزخرفة لأي عنصر يحتويه.

أكثر ويدجت استخدامًا بـ Flutter — صندوق مرن يجمع خصائص كثيرة (padding, margin, decoration, width, height) بدل تداخل عدة ويدجتس منفصلة. إذا احتجت خلفية أو حدودًا أو ظلًّا لعنصر، Container غالبًا هو الحل.

الصياغة

Container(
  width: double,
  height: double,
  padding: EdgeInsets,
  margin: EdgeInsets,
  decoration: BoxDecoration(...),
  child: Widget,
)

📄 مثال

Container(
  width: 200,
  padding: EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.purple,
    borderRadius: BorderRadius.circular(12),
  ),
  child: Text('مرحبًا', style: TextStyle(color: Colors.white)),
)

أهم المعاملات

المعامل	الوظيفة
padding	المسافة الداخلية بين حدود الحاوية ومحتواها
margin	المسافة الخارجية بين الحاوية وما حولها
decoration	لون، حدود، زوايا دائرية، ظل — عبر BoxDecoration
child	الويدجت الوحيد الذي تحتويه

💡 نصائح عملية

لا تستخدم color وdecoration معًا على نفس الـ Container — يسبب خطأ ترجمة، اللون يُحدَّد داخل BoxDecoration

⚠️ أخطاء شائعة

استخدام color مباشرة بعد إضافة decoration — Flutter يمنع الجمع، ضع اللون داخل BoxDecoration.color

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار FLUTTER الكامل بالعربي.