شرح استخدام FractionallySizedBox في فلاتر

تستخدم واجهات المستخدم في Flutter العديد من المكونات المختلفة لتحديد حجم العناصر داخل الشاشة. ومن بين هذه المكونات الأساسية هي FractionallySizedBox ، الذي يستخدم لتحديد حجم العنصر بنسبة مئوية من حجم الحاوية الأم.

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

ما هو FractionallySizedBox في فلاتر؟

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

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

خصائص FractionallySizedBox

يمكن استخدام العديد من الخصائص مع FractionallySizedBox في Flutter. يتم تحديد حجم العنصر بنسبة مئوية باستخدام widthFactor و heightFactor ويمكن استخدام الخصائص الإضافية لتحديد خصائص أخرى لـ FractionallySizedBox.

1- widthFactor

تسمح هذه الخاصية بتحديد عرض العنصر بنسبة مئوية من عرض الحاوية الأم.

FractionallySizedBox(
  widthFactor: 0.5,
  child: Container(
    color: Colors.blue,
    height: 80,
  ),
)

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

2- heightFactor

تسمح هذه الخاصية بتحديد ارتفاع العنصر بنسبة مئوية من ارتفاع الحاوية الأم.

FractionallySizedBox(
  heightFactor: 0.5,
  child: Container(
    color: Colors.blue,
    width: 80,
  ),
)

3- alignment

تسمح هذه الخاصية بتحديد موضع العنصر داخل الحاوية الأم.

FractionallySizedBox(
  widthFactor: 0.5,
  heightFactor: 0.5,
  alignment: Alignment.topLeft,
  child: Container(
    color: Colors.blue,
  ),
)

4- child

تسمح هذه الخاصية بتحديد العنصر داخل FractionallySizedBox.

FractionallySizedBox(
  widthFactor: 0.5,
  heightFactor: 0.5,
  alignment: Alignment.topLeft,
  child: Container(
    color: Colors.blue,
  ),
)

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

تستخدم FractionallySizedBox في Flutter لتحديد حجم العنصر بنسبة مئوية من حجم الحاوية الأم. يمكن استخدام widthFactor و heightFactor لتحديد عرض وارتفاع العنصر بنسبة مئوية. يمكن استخدام العديد من الخصائص الإضافية لتحديد موضع العنصر ونقطة الانطلاق للمحتوى داخل FractionallySizedBox. يمكن استخدام FractionallySizedBox مع أي عنصر في واجهة المستخدم ويمكن تطبيقها على العنصر وعلى أي عنصر يحتوي عليه.

نأمل أن يكون هذا الدليل الشامل لـ FractionallySizedBox قد ساعدك في فهم كيفية استخدام هذه الويدجت في تصميم واجهات المستخدم في Flutter.