Flutter هو إطار عمل قوي يسمح للمطورين بتصميم واجهات المستخدم بشكل سهل وفعال، والذي يتضمن العديد من العناصر (widgets) المختلفة التي تستخدم في بناء واجهات المستخدم. ومن بين هذه العناصر الهامة في Flutter هو عنصر Expanded الذي يسمح للمطورين بتحديد كيفية توسيع مساحة العناصر ضمن مساحة المتاحة على الشاشة.
يأتي عنصر Expanded في Flutter مع عدد من الخصائص التي يمكن استخدامها لتحديد سلوكه ومظهره، وفي هذه المقالة سنقوم بشرح كل خاصية بالتفصيل.
استخدام عنصر Expanded
يمكن استخدام عنصر Expanded في Flutter لتطويل عنصر معين في الاتجاه الرأسي، وذلك عندما تكون هناك مساحة شاغرة على الشاشة. يتم تحديد مدى التوسع المطلوب باستخدام عنصر مربع الطفل (child) الذي يتم تمريره إلى عنصر Expanded.
Expanded(
child: Container(
color: Colors.red,
),
)
في هذا المثال، يتم تحديد العنصر Container للتمدد في الاتجاه الرأسي باستخدام عنصر Expanded.
“اقرأ أيضاً: شرح استخدام ويدجت Tooltip في فلاتر“
خصائص عنصر Expanded
1. flex
يتم استخدام هذا الخاصية لتحديد النسبة المئوية للمساحة التي سيستخدمها عنصر Expanded ضمن عنصر Flex الذي تم وضعه فيه. ويمكن استخدام هذا الخاصية على عنصر Expanded الفردي (standalone) أو كجزء من Flex.
Expanded(
flex: 2,
child: Container(
color: Colors.red,
),
)
في هذا المثال، يتم تحديد عنصر Expanded باستخدام النسبة المئوية 2 ضمن عنصر Flex الذي يحتوي على Expanded.
2. child
يتم استخدام هذا الخاصية لتحديد العنصر الذي سوف يتم تمديده باستخدام عنصر Expanded. ويتم تحديد هذه الخاصية بشكل اختياري.
Expanded(
child: Container(
color: Colors.red,
),
)
في هذا المثال، يتم تحديد العنصر Container كعنصر يتم تمديده باستخدام عنصر Expanded.
“اقرأ أيضاً: شرح استخدام ويدجت SafeArea في فلاتر“
3. key
يمكن استخدام هذه الخاصية لتحديد مفتاح (key) فريد لعنصر Expanded، وذلك لتمكين Flutter من تحديد العنصر بشكل صحيح عند إعادة بناء واجهة المستخدم.
Expanded(
key: UniqueKey(),
child: Container(
color: Colors.red,
),
)
في هذا المثال، يتم تحديد مفتاح فريد لعنصر Expanded باستخدام UniqueKey.
“اقرأ أيضاً: شرح استخدام ويدجت TextField في فلاتر“
عنصر Expanded هو عنصر مهم في Flutter يسمح للمطورين بتحديد كيفية تمدد العناصر ضمن المساحة المتاحة على الشاشة. ويأتي العنصر Expanded مع عدد من الخصائص التي يمكن استخدامها لتحديد سلوكه ومظهره، وتشمل هذه الخصائص flex وchild وflexfit وclipBehavior وkey. باستخدام هذه الخصائص بشكل صحيح، يمكن للمطورين بناء واجهات المستخدم المتناسبة مع احتياجاتهم ومتطلبات تطبيقاتهم.
