يعتبر RotationTransition أحد وسائل الرسوم المتحركة في Flutter والذي يسمح للمطورين بتحريك وتدوير عناصر واجهة المستخدم بشكل دائم أو مؤقت. يتم استخدام هذا العنصر الرسومي عادةً لتحريك الصور والأيقونات وحتى نصوص الواجهة والتأكيد على العمليات الهامة وجذب انتباه المستخدمين.
خصائص RotationTransition
هناك عدة خصائص يمكن تعيينها في RotationTransition لضبط الطريقة التي يتم بها تدوير العنصر. وفيما يلي شرح لكل خاصية بالتفصيل:
“اقرأ أيضاً: شرح استخدام ويدجت Tooltip في فلاتر“
alignment
تحدد نقطة التوازن للعنصر المدور. يمكن استخدام أحد القيم التالية:
Alignment.topLeftAlignment.topCenterAlignment.topRightAlignment.centerLeftAlignment.centerAlignment.centerRightAlignment.bottomLeftAlignment.bottomCenterAlignment.bottomRight
RotationTransition(
alignment: Alignment.center,
turns: _animation,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
),
)
turns
تحدد عدد المرات التي يتم بها تدوير العنصر. يمكن استخدام أي قيمة رقمية لهذه الخاصية.
AnimationController _controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2),
);
Animation<double> _animation = Tween<double>(
begin: 0,
end: 2,
).animate(_controller);
RotationTransition(
turns: _animation,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
),
)
“اقرأ أيضاً: شرح استخدام ويدجت SafeArea في فلاتر“
child
يحدد العنصر الذي يتم تدويره.
RotationTransition(
turns: _animation,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
),
)
مثال على استخدام RotationTransition في فلاتر
هذا مثال بسيط يستخدم RotationTransition لتحريك وتدوير عنصر واحد في التطبيق.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'RotationTransition Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyRotationTransition(),
);
}
}
class MyRotationTransition extends StatefulWidget {
const MyRotationTransition({Key? key}) : super(key: key);
@override
_MyRotationTransitionState createState() => _MyRotationTransitionState();
}
class _MyRotationTransitionState extends State<MyRotationTransition>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 2),
);
_animation = Tween<double>(
begin: 0,
end: 1,
).animate(_controller);
_controller.repeat();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Rotation Transition Demo',
home: Scaffold(
appBar: AppBar(
title: const Text('Rotation Transition Demo'),
),
body: Center(
child: RotationTransition(
turns: _animation,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
child: const Center(
child: Text(
'Rotate',
style: TextStyle(
color: Colors.white,
fontSize: 32,
fontWeight: FontWeight.bold,
),
),
),
),
),
),
),
);
}
}
في هذا المثال، تم إنشاء RotationTransition الذي يتحرك ويتدور مع AnimationController. تم استخدام Tween<double> لتحديد الزاوية التي يتم بها تدوير العنصر، وتم تمرير AnimationController إلى Tween لتحديد مدة التحرك. في build ، تم إنشاء RotationTransition وتمرير Animation إلى turns ، وتم تمرير عنصر Container إلى child. تم تضمين Text وسط العنصر لإظهار التغييرات في التدوير.
“اقرأ أيضاً: شرح استخدام ويدجت TextField في فلاتر“
RotationTransition هو عنصر رسومي يساعد المطورين على تحريك وتدوير العناصر في واجهة المستخدم بشكل سهل وفعال. يمكن تخصيص العديد من الخصائص لتعديل طريقة تدوير العنصر وتحسين تجربة المستخدم.




