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

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

الاستخدام الأساسي لـ Flexible في فلاتر

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

يتم تحديد نسبة Flexible باستخدام flex factor، وهو عدد صحيح يحدد النسبة النسبية للمساحة المتاحة التي تحتلها كل Flexible. على سبيل المثال، إذا كان لدينا Flexible واحد بعامل 2 ومكون آخر بعامل 1، فسيحصل الأول على ضعف المساحة المتاحة للثاني.

Row(
  children: [
    Flexible(
      flex: 2,
      child: Container(
        color: Colors.blue,
        height: 50,
      ),
    ),
    Flexible(
      flex: 1,
      child: Container(
        color: Colors.green,
        height: 50,
      ),
    ),
  ],
)

في هذا المثال، تحتل العناصر الزرقاء ضعف مساحة العناصر الخضراء.

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

الخصائص الإضافية لـ Flexible

يمكن استخدام العديد من الخصائص الإضافية مع Flexible في Flutter.

1- الخاصية flex

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

Flexible(
  flex: 2,
  child: Container(
    height: 50,
    color: Colors.blue,
  ),
),

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

2- الخاصية fit

هذه الخاصية تحدد كيفية تناسب Flexible داخل الفراغ المتاح. يمكن تعيينها إلى FlexFit.tight لجعل Flexible يمتلك كل المساحة المتاحة، أو FlexFit.loose للسماح لـ Flexible بتغيير حجمه وشكله.

Flexible(
  flex: 1,
  fit: FlexFit.tight,
  child: Container(
    color: Colors.blue,
    height: 50,
  ),
),

3- الخاصية child

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

Flexible(
  flex: 1,
  child: Text('Hello world!'),
),

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

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