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

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

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

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

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

خصائص Transform

يحتوي Transform على مجموعة من الخصائص التي يمكن تعيينها لتحديد سلوك العنصر. يتم تفصيل الخصائص في الأسفل:

transform

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

transform: Matrix4.rotationZ(45),

origin

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

origin: Offset(0.5, 0.5),

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

alignment

تحدد موضع العنصر في التطبيق. يمكن تعيين هذه الخاصية عبر الكود التالي:

alignment: Alignment.center,

child

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

child: Image.asset('assets/images/my_image.png'),

استخدام Transform في Flutter

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

import 'package:flutter/material.dart';

بعد ذلك، يمكن إنشاء Transform وتعيين الخصائص اللازمة للعنصر. يمكن استخدام الكود التالي كنموذج لإستخدام Transform:

Transform(
  transform: Matrix4.rotationZ(45),
  origin: Offset(0.5, 0.5),
  alignment: Alignment.center,
  child: Image.asset('assets/images/my_image.png'),
),

في هذا المثال، يتم إنشاء Transform ويتم تعيين الخصية transform لتحديد التحويل الذي يتم تطبيقه على العنصر. كما يتم تعيين الخصية origin لتحديد نقطة التحول الأساسية للعنصر والخصية alignment لتحديد موضع العنصر في التطبيق. وأخيراً، يتم تعيين الخصية child لتحديد العنصر الذي يتم تحويله، وفي هذا المثال هو صورة.

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

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