يعتبر RotationTransition
أحد وسائل الرسوم المتحركة في Flutter والذي يسمح للمطورين بتحريك وتدوير عناصر واجهة المستخدم بشكل دائم أو مؤقت. يتم استخدام هذا العنصر الرسومي عادةً لتحريك الصور والأيقونات وحتى نصوص الواجهة والتأكيد على العمليات الهامة وجذب انتباه المستخدمين.
خصائص RotationTransition
هناك عدة خصائص يمكن تعيينها في RotationTransition
لضبط الطريقة التي يتم بها تدوير العنصر. وفيما يلي شرح لكل خاصية بالتفصيل:
“اقرأ أيضاً: شرح استخدام ويدجت Tooltip في فلاتر“
alignment
تحدد نقطة التوازن للعنصر المدور. يمكن استخدام أحد القيم التالية:
Alignment.topLeft
Alignment.topCenter
Alignment.topRight
Alignment.centerLeft
Alignment.center
Alignment.centerRight
Alignment.bottomLeft
Alignment.bottomCenter
Alignment.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
هو عنصر رسومي يساعد المطورين على تحريك وتدوير العناصر في واجهة المستخدم بشكل سهل وفعال. يمكن تخصيص العديد من الخصائص لتعديل طريقة تدوير العنصر وتحسين تجربة المستخدم.