Container

📦 ما هو Container؟

Container هي واحدة من أكثر الودجتات استخدامًا في فلاتر. وهي عبارة عن صندوق مرن متعدد الاستخدامات يستخدم لتصميم وتنسيق العناصر، مثل:

• التحكم بالحجم (width / height)
• التحكم بالهوامش والفراغات (margin / padding)
• التحكم بالألوان والخلفيات (color / decoration)
• التحكم بالمحاذاة (alignment)
• التحكم بالحدود والانحناءات (border / borderRadius)
• التحكم بمكان الودجت الطفل داخله

🧱 الشكل العام للـ Container

Container(
  width: 100,
  height: 100,
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.symmetric(horizontal: 20),
  alignment: Alignment.center,
  decoration: BoxDecoration(
    color: Colors.blue,
    border: Border.all(color: Colors.black, width: 2),
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text("Hello Container"),
)

Container(
  width: 100,
  height: 100,
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.symmetric(horizontal: 20),
  alignment: Alignment.center,
  decoration: BoxDecoration(
    color: Colors.blue,
    border: Border.all(color: Colors.black, width: 2),
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text("Hello Container"),
)

🧩 الخصائص (Properties) بالتفصيل:

1. width و height ✅

• لتحديد عرض وارتفاع الـ container.
• القيمة بالـ pixel (بشكل تقريبي).
• إذا لم تحددهم، سيتم استخدام الحجم الافتراضي (اعتمادًا على المحتوى أو الأب).

Container(
  width: 200,
  height: 100,
)

Container(
  width: 200,
  height: 100,
)

2. color 🟥

• لتحديد لون الخلفية.
• ملاحظة مهمة: لا يمكنك استخدام color إذا كنت تستخدم decoration تحتوي على color.

Container(
  color: Colors.red,
)

Container(
  color: Colors.red,
)

إذا استخدمت:

decoration: BoxDecoration(color: Colors.red)

decoration: BoxDecoration(color: Colors.red)

فلا تكتب color مباشرة.

3. decoration 🎨

• تمنحك تحكمًا كاملاً بشكل الخلفية.
• تستخدم BoxDecoration.

مثال:

Container(
  decoration: BoxDecoration(
    color: Colors.green,
    border: Border.all(color: Colors.black, width: 2),
    borderRadius: BorderRadius.circular(15),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 10,
        offset: Offset(4, 4),
      ),
    ],
  ),
)

Container(
  decoration: BoxDecoration(
    color: Colors.green,
    border: Border.all(color: Colors.black, width: 2),
    borderRadius: BorderRadius.circular(15),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 10,
        offset: Offset(4, 4),
      ),
    ],
  ),
)

خصائص BoxDecoration:

• color: لون الخلفية.
• border: لتحديد الحدود.
• borderRadius: لتدوير الحواف.
• boxShadow: لتطبيق الظلال.
• gradient: لتطبيق تدرج لوني.
• image: لوضع صورة كخلفية.

4. padding 🧷

• المسافة داخل الـ container بين حدوده والمحتوى.
• تستخدم EdgeInsets.

Container(
  padding: EdgeInsets.all(16),
  child: Text("Text inside padding"),
)

Container(
  padding: EdgeInsets.all(16),
  child: Text("Text inside padding"),
)

5. margin 🧷

• المسافة خارج الـ container بينه وبين العناصر المجاورة.

Container(
  margin: EdgeInsets.symmetric(vertical: 10),
)

Container(
  margin: EdgeInsets.symmetric(vertical: 10),
)

6. alignment 📍

• لتحديد موضع الطفل داخل الـ container.

القيم المتاحة:

Alignment.topLeft
Alignment.topCenter
Alignment.center
Alignment.bottomRight
// إلخ...

Alignment.topLeft
Alignment.topCenter
Alignment.center
Alignment.bottomRight
// إلخ...

Container(
  alignment: Alignment.centerRight,
  child: Text("Aligned"),
)

Container(
  alignment: Alignment.centerRight,
  child: Text("Aligned"),
)

7. constraints ⛓️

• تستخدم لتحديد حدود معينة للحجم، مثل الحد الأدنى أو الأقصى للعرض والارتفاع.

Container(
  constraints: BoxConstraints(
    minWidth: 100,
    maxWidth: 200,
  ),
)

Container(
  constraints: BoxConstraints(
    minWidth: 100,
    maxWidth: 200,
  ),
)

8. child 👶

• وهو العنصر الموجود داخل الـ Container.
• يمكن أن يكون أي ودجت: Text, Column, Image, إلخ.

9. transform 🌀

• لتدوير، تكبير، أو تحريك الـ Container باستخدام Matrix4.

Container(
  transform: Matrix4.rotationZ(0.1),
)

Container(
  transform: Matrix4.rotationZ(0.1),
)

10. foregroundDecoration 🖼️

• نفس decoration لكن يتم تطبيقها فوق الطفل.

11. clipBehavior ✂️

• للتحكم في طريقة قص المحتوى إذا خرج عن الحواف.
• القيم الممكنة: Clip.none, Clip.hardEdge, Clip.antiAlias, Clip.antiAliasWithSaveLayer.

clipBehavior: Clip.antiAlias,

clipBehavior: Clip.antiAlias,

⚠️ ملاحظات مهمة جدًا:

• لا تستخدم color وdecoration في نفس الوقت، إذا استخدمت decoration تحتوي على color فاحذف الخاصية color.
• Container ليست الأفضل دائمًا، إذا كنت فقط تريد التوسيع أو التوسيط، استخدم SizedBox, Padding, Align, Center, Expanded… حسب الحاجة.
• Container ثقيلة قليلًا عند الاستخدام الكبير، فحاول استخدام بدائل إن أمكن.

🎯 بعض الأمثلة العملية:

📌 إنشاء مربع أحمر وسط الشاشة:

Center(
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
)

Center(
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
)

📌 خلفية متدرجة:

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.purple],
    ),
  ),
)

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.purple],
    ),
  ),
)

📌 صورة كخلفية:

Container(
  width: 300,
  height: 200,
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('assets/bg.jpg'),
      fit: BoxFit.cover,
    ),
  ),
)

Container(
  width: 300,
  height: 200,
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('assets/bg.jpg'),
      fit: BoxFit.cover,
    ),
  ),
)

📌 إطار وحدود مستديرة:

Container(
  padding: EdgeInsets.all(10),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: Colors.blueAccent),
    borderRadius: BorderRadius.circular(12),
  ),
  child: Text("مرحبا"),
)

Container(
  padding: EdgeInsets.all(10),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: Colors.blueAccent),
    borderRadius: BorderRadius.circular(12),
  ),
  child: Text("مرحبا"),
)

✅ خلاصة: