يعد 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، وسيساعدك في استخدام هذا العنصر بشكل فعال وإنشاء تأثيرات انتقالية سلسة وأنيقة في تطبيقاتك.




