شرح استخدام ويدجت Container في فلاتر

الحاوية Container في فلاتر هي أداة يمكن استخداها لتخزين ويدجت أو أكثر ووضعها على الشاشة وفقًا لراحتنا. في الأساس، تشبه الحاوية Container صندوقًا لتخزين المحتويات. في هذه المقالة سنقدم لك معلومات مفصلة حول Flutter Container وطريقة استخدامها في إطار عمل Flutter.

ما هو عنصر Container في فلاتر؟

الحاوية Container في Flutter عبارة عن ويدجت رئيسي يمكن أن يحتوي على العديد من عناصر واجهة المستخدم الفرعية وإدارتها بكفاءة من خلال العرض والارتفاع والpadding ولون الخلفية وما إلى ذلك. يسمح للمستخدم بتزيين أدواته الفرعية وباقي الويدجت، مثل استخدام الهامش margin، الذي يفصل الحاوية عن المحتويات الأخرى.

أداة الحاوية هي نفسها تاج <div> في html. إذا كانت هذه الأداة لا تحتوي على أي ويدجت تابع، فسوف تملأ المنطقة بأكملها على الشاشة تلقائيًا. خلاف ذلك، فإنها سوف تظهر وفقًا للعرض والارتفاع المحددين. تجدر الإشارة إلى أن هذه الأداة لا يمكن عرضها مباشرة بدون أي ويدجت رئيسي. يمكننا استخدام ويدجت Scaffold أو أي ويدجت أخرى.

“اقرأ أيضاً: شرح استخدام ReorderableListView في فلاتر“

لماذا نحتاج إلى أداة الحاوية Container في Flutter؟

إذا كان لدينا ويدجت يحتاج إلى بعض المميزات مثل تصميم الخلفية فقد يكون لونًا أو شكلًا أو تحديد الحجم، فقد نحاول وضعه بداخل ويدجت الحاوية Container. تساعدنا هذه الأداة على إنشاء ويدجت بداخلها وتزيينها. إذا قمنا بوضع الويدجت الخاصة بنا في الحاوية، فلن نلاحظ أي اختلاف في مظهرها بدون استخدام أيا من خصائصها. ولكن إذا أضفنا أي خصائص مثل اللون والهامش margin والحشو padding وما إلى ذلك في الحاوية Container، فيمكننا تصميم الويدجت الخاصة بنا على الشاشة وفقًا لاحتياجاتنا.

“اقرأ أيضاً: شرح استخدام ويدجت SafeArea في فلاتر“

خصائص ويدجت الحاوية Container في فلاتر

دعونا نتعرف على بعض الخصائص الأساسية لعنصر الحاوية بالتفصيل:

1- الخاصية child:

تُستخدم هذه الخاصية لوضع ويدجت أخرى داخل الحاوية Container. لنفترض أننا اتخذنا Text كويدجت تابع لها والتي يمكن عرضها في المثال أدناه:

Container(  
    child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),  
)  

2- الخاصية color:

تُستخدم هذه الخاصية لتعيين لون خلفية النص. كما أنه يغير لون الخلفية للحاوية بأكملها. انظر المثال أدناه:

Container(  
    color: Colors.green,   
    child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),  
)  

3- الخاصية height and width:

تستخدم هذه الخاصية لضبط ارتفاع الحاوية Container وعرضها وفقًا لاحتياجاتنا. بشكل افتراضي، تأخذ الحاوية دائمًا المساحة بناءً على الويدجت التابع لها. انظر الكود أدناه:

Container(  
    width: 200.0,  
    height: 100.0,  
    color: Colors.green,   
    child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),  
)  

“اقرأ أيضاً: شرح استخدام ويدجت Flexible في فلاتر“

4- الخاصية margin:

تستخدم هذه الخاصية لجعل مساحة فارغة حول الحاوية من الخارج. يمكننا ملاحظة ذلك من خلال رؤية مساحة بيضاء حول الحاوية Container. لنفترض أننا استخدمنا EdgeInsets.all(25) التي تحدد الهامش المتساوي في جميع الاتجاهات الأربعة، كما هو موضح في المثال أدناه:

Container(  
    width: 200.0,  
    height: 100.0,  
    color: Colors.green,   
    margin: EdgeInsets.all(20),  
    child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),  
)  

5- الخاصية padding:

تُستخدم هذه الخاصية لتعيين المسافة بين حدود الحاوية (جميع الاتجاهات الأربعة) والويدجت الفرعية الخاصة بها. هنا، استخدمنا EdgeInsets.all(35) الذي يحدد المسافة بين النص وجميع اتجاهات الحاوية الأربعة:

Container(  
    width: 200.0,  
    height: 100.0,  
    color: Colors.green,   
    padding: EdgeInsets.all(35),  
    margin: EdgeInsets.all(20),  
    child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),  
)  

“اقرأ أيضاً: شرح استخدام ويدجت AbsorbPointer في فلاتر“

6- الخاصية alignment:

تستخدم هذه الخاصية لتعيين موضع الويدجت بداخل الحاوية. يسمح Flutter للمستخدم بمحاذاة العناصر بطرق مختلفة مثل المركز، والأسفل، والمركز السفلي، واليسار العلوي، والوسط الأيمن، واليسار، واليمين، وغيرها الكثير. في المثال أدناه، سنقوم بمحاذاة الويدجت في الموضع الأيمن السفلي.

Container(  
    width: 200.0,  
    height: 100.0,  
    color: Colors.green,   
    padding: EdgeInsets.all(35),  
    margin: EdgeInsets.all(20),  
    alignment: Alignment.bottomRight,  
    child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),  
)  

7- الخاصية decoration:

تتيح هذه الخاصية للمطور تزيين الويدجت الخاصه به.

8- الخاصية transform:

تسمح خاصية transform للمطورين بتدوير الحاوية. يمكنه تدوير الحاوية في أي اتجاه، أي تغيير تنسيق الحاوية في الويدجت الأصلي. في المثال أدناه، سنقوم بتدوير الحاوية في المحور z.

Container(  
    width: 200.0,  
    height: 100.0,  
    color: Colors.green,   
    padding: EdgeInsets.all(35),  
    margin: EdgeInsets.all(20),  
    alignment: Alignment.bottomRight,  
    transform: Matrix4.rotationZ(0.1),   
    child: Text("Hello! I am in the container widget", style: TextStyle(fontSize: 25)),  
)  

9- الخاصية constraints:

يتم استخدام هذه الخاصية عندما نريد إضافة قيود إضافية إلى الويدجت الداخلي.

“اقرأ أيضاً: ما هو الفرق بين MVC و MVVM في فلاتر؟“

نأمل أن نكون قد قدمنا لك فهمًا كافيًا حول استخدام الحاوية Container في Flutter. إذا كنت ترغب في فهم المزيد عن Flutter، أو إنشاء تطبيق مذهل باستخدامه، فلا تتردد في متابعتنا وقراءة المزيد من المقالات.