شرح Flutter Parallax UI لإنشاء تأثيرات حركة ثلاثية الأبعاد على الصور عند تحريك الهاتف
إذا كنت تبحث عن طريقة احترافية لإضافة تأثيرات بصرية مذهلة داخل تطبيقك، فإن Flutter Parallax UI يعد من أفضل الأساليب التي تمنح الصور عمقًا وحركة ديناميكية تستجيب مباشرة لتحريك الهاتف. هذا النوع من التأثيرات يجعل واجهة التطبيق أكثر حداثة، ويضيف لمسة تفاعلية رائعة تشبه الخلفيات الحية أو واجهات التطبيقات المتقدمة.
في هذا المقال سنتعرف على كيفية إنشاء Flutter Parallax UI باستخدام مكتبة sensors_plus، مع شرح كامل للكود الذي يعتمد على تحريك الصور بناءً على بيانات الجيروسكوب، مما ينتج عنه تأثير ثلاثي الأبعاد جذاب وسلس.
ما هو Flutter Parallax UI؟
الميزة الأساسية في Flutter Parallax UI أنه يحول التصميم التقليدي إلى واجهة نابضة بالحياة، حيث يشعر المستخدم أن العناصر ليست ثابتة، بل تتفاعل مع طريقة استخدامه للهاتف.
لماذا يعتبر تأثير Parallax مهمًا في تطبيقات Flutter؟
تحسين الانطباع الأول
عندما يفتح المستخدم التطبيق ويشاهد الصور تتحرك بشكل احترافي، فإنه يشعر بجودة التطبيق واهتمام المطور بالتفاصيل.
إضافة عمق للواجهة
بدلاً من عرض صور ثابتة، يمنحك Flutter Parallax UI إحساسًا بالطبقات والحركة، وهو ما يجعل الواجهة أكثر واقعية وجاذبية.
رفع مستوى التفاعل
التفاعل مع حركة الهاتف يعطي المستخدم شعورًا بأن التطبيق حي ويتجاوب مع سلوكه بشكل مباشر.
مناسب لتطبيقات متعددة
يمكن استخدام هذا التأثير في تطبيقات الخلفيات، المعارض، التطبيقات التعليمية، المتاجر الإلكترونية، وحتى تطبيقات القصص والمحتوى المرئي.
إضافة المكتبة المطلوبة
قم بإضافة المكتبة داخل ملف pubspec.yaml:
dependencies:
sensors_plus:
flutter pub get
استيراد المكتبات داخل الكود
import 'package:flutter/material.dart';
import 'package:sensors_plus/sensors_plus.dart';
توفر مكتبة Material العناصر الأساسية لبناء الواجهة، بينما تستخدم sensors_plus لقراءة بيانات الجيروسكوب وتحويلها إلى حركة مرئية على الصور.
إنشاء واجهة ParallaxImage
class ParallaxImage extends StatefulWidget {
const ParallaxImage({Key? key}) : super(key: key);
@override
State<ParallaxImage> createState() => _ParallaxImageState();
}
استخدام StatefulWidget هنا ضروري لأن قيم الموضع مثل top و left تتغير باستمرار مع حركة الجهاز.
المتغيرات الأساسية في الكود
double top = 0;
double left = 0;
هذان المتغيران يتحكمان في موضع الصورة داخل العنصر. كلما تحرك الهاتف، يتم تحديث هذه القيم، وبالتالي تتحرك الصورة داخل الإطار بطريقة ناعمة تعطي إحساسًا بالاختلاف في المنظور.
كما يتم تعريف قائمة الصور:
List<String> img = [
"assets/images/image_1.jpeg",
"assets/images/image_2.jpeg",
"assets/images/image_3.jpeg",
"assets/images/image_4.jpeg",
"assets/images/image_5.jpeg",
];
بناء الواجهة الرئيسية
ListView.builder(
itemCount: img.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context,index){
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: SizedBox(
width: 325,
child: parallax(index),
),
),
);
},
)
هذا الجزء مهم لأنه لا يعرض صورة واحدة فقط، بل يقدم معرض صور متحرك، وكل صورة تستفيد من تأثير Flutter Parallax UI.
استخدام ClipRRect هنا يساعد في إعطاء الصور حواف دائرية، وهو ما يجعل التصميم أكثر عصرية وأناقة.
كيف يتم إنشاء تأثير الحركة على الصور؟
parallax(int inx){
return Stack(
alignment: Alignment.center,
children: [
Positioned(
top: -50 + top,
left: -50 + left,
bottom: -50 - top,
right: -50 - left,
child: Image.asset(
img[inx],
fit:BoxFit.cover,
),
),
],
);
}
في هذا الجزء يتم استخدام Positioned لتحريك الصورة داخل Stack. الفكرة هنا أن الصورة تكون أكبر قليلًا من الإطار الخارجي، ثم يتم تعديل موضعها بناءً على قيم top و left.
هذا التغيير المستمر في الاتجاهات الأربعة يجعل الصورة تتحرك وكأنها طبقة عميقة داخل المشهد، وهو بالضبط ما يميز Flutter Parallax UI.
قراءة بيانات الجيروسكوب وتحويلها إلى حركة
getData(){
gyroscopeEvents.listen((GyroscopeEvent event) {
setState(() {
top = top + event.x * 1.5;
left = left + event.y * 1.5;
});
});
}
يقوم هذا الكود بالاستماع إلى مستشعر الجيروسكوب بشكل مباشر. وعند تحريك الهاتف، يتم التقاط قيم الحركة في المحاور المختلفة، ثم تستخدم هذه القيم لتحديث موضع الصورة.
استخدام setState هنا يضمن إعادة بناء الجزء المرئي فورًا، مما ينتج عنه حركة لحظية وسلسة على الشاشة.
متى يكون Flutter Parallax UI مناسبًا؟
– تطبيقات الخلفيات المتحركة – واجهات عرض الصور – تطبيقات القصص والمحتوى البصري – صفحات الترحيب Onboarding – تطبيقات المعارض الفنية – تصميم بطاقات المنتجات في المتاجر الإلكترونية
كل هذه الحالات تستفيد من إضافة عمق بصري يجعل التصميم أكثر إبهارًا.
نصائح لتحسين الأداء
تقليل التحديثات المبالغ فيها
لأن الجيروسكوب يرسل بيانات كثيرة جدًا، قد تحتاج إلى تقليل الحساسية أو عمل فلترة بسيطة للقيم.
ضغط الصور
الصور الكبيرة جدًا قد تؤثر على الأداء، لذلك يفضل استخدام صور محسنة للحجم.
اختبار التأثير على أجهزة مختلفة
حساسية المستشعر تختلف من جهاز إلى آخر، لذا من الأفضل تجربة التطبيق على أكثر من هاتف.
عدم المبالغة في الحركة
تأثير Parallax يجب أن يكون ناعمًا وليس مزعجًا، لأن الحركة الزائدة قد تؤثر على راحة المستخدم.
رابط الكود المصدر
https://github.com/imayush-chauhan/flutter_wallpaper_ui/blob/master/lib/screen/parallax_image.dart
رابط المقال
https://github.com/imayush-chauhan/flutter_wallpaper_ui/blob/master/lib/screen/parallax_image.dart
الخلاصة
هذا النوع من التصميم لا يمنح التطبيق مظهرًا احترافيًا فقط، بل يساعد أيضًا في إبراز الهوية البصرية للتطبيق بطريقة أقوى وأكثر تميزًا. وإذا تم تنفيذه بشكل متوازن مع مراعاة الأداء، فسيكون إضافة ممتازة لأي مشروع Flutter حديث.
ابدأ الآن في تجربة Flutter Parallax UI داخل مشروعك، وطوّر واجهات أكثر تفاعلية وعمقًا لتقديم تجربة استخدام مختلفة ومميزة.
لمزيد من المقالات : شرح عمل انتقال لعناصر tabs list animation scroll مع انميشن عند النقر على اي عنصر
