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

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

الخصائص الأساسية لويدجت Positioned

top

تُستخدم هذه الخاصية لتعيين الإسناد العمودي للعنصر في الأعلى. يمكن تعيينها بأي قيمة عددية.

Positioned(
  top: 20,
  left: 20,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
),

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

left

تُستخدم هذه الخاصية لتعيين الإسناد الأفقي للعنصر في اليسار. يمكن تعيينها بأي قيمة عددية.

Positioned(
  top: 20,
  left: 20,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
),

right

تُستخدم هذه الخاصية لتعيين الإسناد الأفقي للعنصر في اليمين. يمكن تعيينها بأي قيمة عددية.

Positioned(
  top: 20,
  right: 20,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
),

bottom

تُستخدم هذه الخاصية لتعيين الإسناد العمودي للعنصر في الأسفل. يمكن تعيينها بأي قيمة عددية.

Positioned(
  bottom: 20,
  left: 20,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
),

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

width

تُستخدم هذه الخاصية لتعيين عرض العنصر. يمكن تعيينها بأي قيمة عددية.

Positioned(
  top: 20,
  left: 20,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
),

height

تُستخدم هذه الخاصية لتعيين ارتفاع العنصر. يمكن تعيينها بأي قيمة عددية.

Positioned(
  top: 20,
  left: 20,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
),

child

يُستخدم هذا الخاصية لتعيين العنصر الفعلي الذي سيتم تمريره إلى Positioned. يمكن استخدام أي عنصر واجهة مستخدم في Flutter.

Positioned(
  top: 20,
  left: 20,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
),

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

تُستخدم ويدجت Positioned في Flutter لتحديد موضع العنصر بداخلها. تعد هذه الخاصية مهمة لتحقيق تصميمات مُختلفة في واجهة المستخدم، وعند استخدامها بشكل صحيح، يمكن للمطورين بناء تطبيقات متفوقة بصرياً وذات تصميم جذاب.

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

نأمل أن تكون هذه المقالة قد ساعدتك على فهم Positioned في Flutter، وأن تتمكن من استخدامها بشكل فعال في تصميم واجهات المستخدم في تطبيقات Flutter.