يعد SlideTransition
أحد عناصر واجهة المستخدم في Flutter الذي يسمح لنا بتحريك وتغيير موقع العناصر في التطبيق. بشكل عام، يتم استخدام هذا العنصر لإنشاء تأثيرات انتقالية سلسة وأنيقة بين عناصر مختلفة في التطبيق.
تتيح لنا SlideTransition
إمكانية التحكم في موقع العنصر، وتحديد الوقت الذي يستغرقه التأثير، وتحديد الاتجاه والمسافة التي يتحرك بها العنصر. في هذه المقالة، سنقوم بشرح SlideTransition
بالتفصيل، وسنتناول جميع خصائصه بالتفصيل مع الأمثلة المناسبة.
خصائص SlideTransition
position
يتم استخدام هذه الخاصية لتحديد موقع العنصر. يمكن تحديد القيمة باستخدام Tween<Offset>
، والتي يتم تحديد الاتجاه والمسافة التي يتحرك بها العنصر.
SlideTransition( position: _animation.drive( Tween<Offset>( begin: Offset(1.0, 0.0), end: Offset.zero, ), ), child: Container( width: 200, height: 200, color: Colors.blue, ), ),
“اقرأ أيضاً: شرح استخدام ويدجت Tooltip في فلاتر“
transformHitTests
يتم استخدام هذه الخاصية لتحديد ما إذا كانت العناصر الفرعية يجب أن تشارك في اختبار اللمس. إذا تم تعيين هذه الخاصية إلى true
، فستؤثر حركة العنصر على تفاعل المستخدم مع العناصر الفرعية.
SlideTransition( position: _animation.drive( Tween<Offset>( begin: Offset(1.0, 0.0), end: Offset.zero, ), ), transformHitTests: true, child: Container( width: 200, height: 200, color: Colors.blue, ), ),
textDirection
يتم استخدام هذه الخاصية لتحديد اتجاه النص. يمكن تعيين القيمة إما TextDirection.ltr
أو TextDirection.rtl
.
SlideTransition( position: _animation.drive( Tween<Offset>( begin: Offset(1.0, 0.0), end: Offset.zero, ), ), textDirection: TextDirection.rtl, child: Container( width: 200, height: 200, color: Colors.blue, ), ),
“اقرأ أيضاً: شرح استخدام ويدجت SafeArea في فلاتر“
child
يتم استخدام هذه الخاصية لتحديد العنصر الذي يتم تحريكه.
SlideTransition( position: _animation.drive( Tween<Offset>( begin: Offset(1.0, 0.0), end: Offset.zero, ), ), child: Container( width: 200, height: 200, color: Colors.blue, ), ),
مثال على استخدام SlideTransition
في فلاتر
هذا مثال بسيط يستخدم SlideTransition
لتحريك عنصر واحد في التطبيق.
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'SlideTransition Example', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MySlideTransition(), ); } } class MySlideTransition extends StatefulWidget { const MySlideTransition({Key? key}) : super(key: key); @override _MySlideTransitionState createState() => _MySlideTransitionState(); } class _MySlideTransitionState extends State<MySlideTransition> with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation<Offset> _animation; @override void initState() { super.initState(); _controller = AnimationController( vsync: this, duration: const Duration(seconds: 2), ); _animation = Tween<Offset>( begin: const Offset(1.0, 0.0), end: Offset.zero, ).animate(_controller); _controller.forward(); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return MaterialApp( title: 'Slide Transition Demo', home: Scaffold( appBar: AppBar( title: const Text('Slide Transition Demo'), ), body: Center( child: SlideTransition( position: _animation, child: Container( width: 200, height: 200, color: Colors.blue, ), ), ), ), ); } }
في هذا المثال، تم إنشاء SlideTransition
الذي يتحرك مع AnimationController
. تم استخدام Tween<Offset>
لتحديد الاتجاه والمسافة التي يتحرك بها العنصر، وتم تمرير AnimationController
إلى Tween
لتحديد مدة التحرك. في build
، تم إنشاء SlideTransition
وتمرير Animation
إلى position
، وتم تمرير عنصر Container
إلى child
.
“اقرأ أيضاً: شرح استخدام ويدجت TextField في فلاتر“
في هذه المقالة، قمنا بشرح SlideTransition
في Flutter بالتفصيل، وتناولنا جميع خصائصه بالتفصيل. تعد SlideTransition
أداة هامة في بناء تأثيرات انتقالية سلسة وأنيقة في تطبيقات Flutter. يمكن استخدام العديد من الخصائص المختلفة في SlideTransition
لتحكم في كيفية تحريك العناصر وتغيير مواقعها. يمكن استخدام SlideTransition
بشكل فردي، أو بالتزامن مع عناصر أخرى، مثل AnimatedContainer
أو FadeTransition
، لإنشاء تأثيرات انتقالية أكثر تعقيداً.
نأمل أن يكون هذا الدليل الشامل قد قدم لك فكرة واضحة عن SlideTransition
في Flutter، وسيساعدك في استخدام هذا العنصر بشكل فعال وإنشاء تأثيرات انتقالية سلسة وأنيقة في تطبيقاتك.