1- الحاوية - Container 

هي عنصر من أشهر عناصر فلاتر وكثيراً ما تستخدم في تصميم عناصر التطبيق الأخرى 

وهي عبارة عن حاوية تشبه <div> في الويب , ويمكن من خلالها حصر العناصر التي بداخلها 
ضمن مقاسات معينة او ضمن padding أو margin معينة أو إحاطتها بإطار border 
أو تطبيق ستايل معين عليها .

* نعني بـ padding التباعد الداخلي للحاوية بحيث تبداً العناصر بالتواجد بعد هذا البعد
* نعني بـ margin التباعد الخارجي للحاوية من الجهات الأربعة 
* نعني بـ Border الإطار الخارجي للحاوية حيث يكون له سماكة ولون والتفاف و نمط خط 

padding vs margin vs border



الخصائص الـتي يمكن تطبيقها على الحاوية  Container : 

• width : وتأخذ قيمة رقم عشري double 

• height : وتأخذ قيمة رقم عشري double 

• color : اللون و تأخذ قيمة لون ضمن فلاتر مثل

Colors.red

• padding : التباعد الداخلي وتأخذ قيمة EdgeInset

مثال  EdgeInset.all(5)

• margin : التباعد الخارجي وتأخذ قيمة EdgeInset
 مثال  EdgeInset.all(5) 

• Border : الإطار الخارجي ويأخذ قيمة BorderSide مثال : 
Border.all(width: 2.0, color: const Color(0xFFFFFFFF))

• decoration : وتأخذ كلاس BoxDecoration , ويمكن من خلاله تطبيق لون أو تدرج او صورة بالخلفية للحاوية 
مثال : 


Container(
  decoration: BoxDecoration(
    color: const Color(0xff7c94b6),
    image: const DecorationImage(
      image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
      fit: BoxFit.cover,
    ),
    border: Border.all(
      width: 8,
    ),
    borderRadius: BorderRadius.circular(12),
  ),
)


ملاحظة هامة : إذا تم تطبيق اللون في الستايل decoration  لا يمكن تطبيقه في خصائص الحاوية ضمن color 


2 - مربع القياس أو  SizedBox 

عنصر يعمل بعمل الحاوية السابقة لكن يمكن تطبيق خصائص الطول والعرض عليه فقط , 
أي لا يمكن تطبيق تباعد أو ستايل أو لون عليه .

له خاصيتين وهما الطول والعرض :

width : وتأخذ قيمة رقم عشري double 
 height : وتأخذ قيمة رقم عشري double 


مراجع مهمة :

Container class - widgets library - Dart API (flutter.dev)
padding property - Container class - widgets library - Dart API (flutter.dev)
Border class - painting library - Dart API (flutter.dev)
BoxDecoration class - painting library - Dart API (flutter.dev)