شرح Flutter Shrink Slide Card لإنشاء تأثيرات بطاقات متحركة احترافية
إذا كنت تسعى إلى تحسين واجهة المستخدم داخل تطبيق Flutter الخاص بك، فإن استخدام Flutter Shrink Slide Card يعد من أفضل الطرق لإضافة تأثيرات حركية جذابة واحترافية. هذا النوع من الأنيميشن يمنح البطاقات (Cards) طابعًا ديناميكيًا، حيث يتم تقليصها وسحبها عند التفاعل معها، مما يخلق تجربة استخدام ممتعة وسلسة.
في التطبيقات الحديثة، لم تعد الواجهات الثابتة كافية، بل أصبح من الضروري تقديم تفاعلات بصرية تعزز تجربة المستخدم وتجعل التطبيق أكثر حيوية. وهنا يأتي دور تأثير Shrink Slide Card كحل بسيط وقوي في نفس الوقت.
في هذا المقال سنتعرف على كيفية تنفيذ Flutter Shrink Slide Card، الأدوات المستخدمة، وكيفية تحسين الأداء وتجربة المستخدم.
ما هو Flutter Shrink Slide Card؟
هذا التأثير يعطي إحساسًا بأن البطاقة تتحرك داخل الواجهة وتستجيب مباشرة للمستخدم، وهو ما يجعل التصميم أكثر احترافية مقارنة بالبطاقات التقليدية.
يستخدم هذا الأسلوب عادة في:
– عرض الصور – بطاقات المنتجات – واجهات الملفات الشخصية – تطبيقات المحتوى
كيف يعمل تأثير Shrink Slide Card؟
عند التفاعل مع البطاقة:
– يتم تقليل حجم البطاقة (Shrink) – يتم تحريكها للأعلى أو لأي اتجاه (Slide) – عند النقر مرة أخرى تعود إلى وضعها الطبيعي
هذا التفاعل يتم بسلاسة باستخدام أدوات الأنيميشن المدمجة في Flutter.
الأدوات المستخدمة في تنفيذ التأثير
يستخدم لإنشاء انتقال سلس بين قيمتين، مثل حجم البطاقة أو موقعها.
Transform
يستخدم لتحريك أو تكبير أو تصغير العنصر على الشاشة.
Container و BoxDecoration
لتصميم شكل البطاقة من حيث اللون والحواف والظلال.
Curves
لتحديد نمط الحركة وجعلها أكثر طبيعية.
مثال على استخدام TweenAnimationBuilder
TweenAnimationBuilder(
tween: Tween(begin: 1.0, end: isExpanded ? 0.9 : 1.0),
duration: Duration(milliseconds: 300),
curve: Curves.fastOutSlowIn,
builder: (context, value, child) {
return Transform.scale(
scale: value,
child: child,
);
},
)
في هذا المثال، يتم تقليص حجم البطاقة عند التفاعل معها، ثم إعادتها إلى الحجم الطبيعي.
إضافة تأثير الحركة باستخدام Transform
Transform.translate(
offset: Offset(0, isExpanded ? -20 : 0),
child: yourWidget,
)
هذا يجعل البطاقة تتحرك للأعلى عند التفاعل، مما يضيف تأثير Slide واضح.
تصميم البطاقة الأساسية
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 10,
),
],
),
child: Column(
children: [
Image.asset('image.png'),
Text('عنوان البطاقة'),
],
),
)
هذا التصميم يمكن دمجه بسهولة مع الأنيميشن لإنشاء Flutter Shrink Slide Card متكامل.
كيف تحسن تجربة المستخدم باستخدام هذا التأثير؟
يشعر المستخدم أن البطاقة تستجيب له فورًا عند النقر.
وضوح بصري
الحركة تساعد في توضيح العنصر النشط.
جاذبية التصميم
الأنيميشن يجعل التطبيق يبدو أكثر احترافية.
تنظيم المحتوى
يمكن استخدام التأثير لإبراز عنصر معين دون إخفاء باقي العناصر.
أفضل استخدامات Flutter Shrink Slide Card
– تطبيقات التجارة الإلكترونية – تطبيقات الصور – تطبيقات الأخبار – واجهات Dashboard – تطبيقات التواصل الاجتماعي
أي واجهة تعتمد على البطاقات يمكنها الاستفادة من هذا التأثير.
نصائح لتحسين الأداء
استخدم التأثير بشكل معتدل.
تقليل مدة الأنيميشن
اجعل الحركة سريعة لتجنب الإحساس بالبطء.
اختبار الأداء
جرب التطبيق على أجهزة مختلفة.
استخدام Widgets خفيفة
لتقليل استهلاك الموارد.
رابط الكود
https://github.com/yunweneric/flutter-open-ui/blob/shrink_slide_card/lib/screens/home_screen.dart
رابط المقال
https://github.com/yunweneric/flutter-open-ui/blob/shrink_slide_card/lib/screens/home_screen.dart
الخلاصة
باستخدام أدوات مثل TweenAnimationBuilder و Transform يمكنك إنشاء تأثيرات حركية سلسة تجعل التطبيق أكثر تفاعلية وحداثة.
إذا كنت ترغب في تحسين تجربة المستخدم داخل تطبيقك، فإن هذا التأثير يعد خيارًا ممتازًا يستحق التجربة.
لمزيد من المقالات : شرح Observer Design Pattern بالتفصيل مع مثال عملي في Java
يمكنك متابع جي كودرس لمزيد من المقالات البرمجيه في مختلف المجالات
