شرح Flutter Blurred ListView لإضافة تأثير Blur ديناميكي أثناء التمرير
إذا كنت ترغب في تحسين تجربة المستخدم داخل تطبيق Flutter الخاص بك، فإن استخدام Flutter Blurred ListView يعد من أفضل الطرق لإضافة لمسة احترافية أثناء التمرير داخل القوائم. فبدلاً من عرض قائمة تقليدية، يمكنك إنشاء تأثير تمويه (Blur) ديناميكي يتغير حسب سرعة التمرير، مما يجعل الواجهة أكثر تفاعلية وجاذبية.
في التطبيقات الحديثة، أصبحت التفاصيل الصغيرة مثل تأثيرات التمرير تلعب دورًا كبيرًا في تحسين الانطباع العام للمستخدم. وهنا يأتي دور تقنيات مثل BackdropFilter و AnimationController التي تساعدك على بناء تجربة استخدام سلسة ومتقدمة.
في هذا المقال سنتعرف على كيفية تنفيذ Flutter Blurred ListView، وفهم طريقة عمله، والأدوات المستخدمة لبنائه، بالإضافة إلى أفضل الممارسات لتحسين الأداء.
ما هو Flutter Blurred ListView؟
في هذا النوع من القوائم، يتم عرض نسختين:
– قائمة عادية بدون تأثير – قائمة أخرى تحتوي على Blur
ويتم التحكم في ظهور تأثير التمويه بناءً على سرعة التمرير.
كيف يعمل تأثير التمويه أثناء التمرير؟
– عند التمرير ببطء → لا يوجد Blur – عند التمرير بسرعة → يظهر تأثير التمويه
يتم حساب سرعة التمرير باستخدام الفرق بين موضع التمرير الحالي والسابق، مقسومًا على الزمن. وكلما زادت السرعة، زادت قيمة التمويه.
هذا الأسلوب يعطي إحساسًا طبيعيًا بالحركة، مشابه لما نراه في بعض التطبيقات الاحترافية.
الأدوات المستخدمة في تنفيذ Flutter Blurred ListView
يستخدم للتحكم في شدة التمويه بمرور الوقت، حيث يتم تشغيل الأنيميشن عند التمرير وإيقافه عند التوقف.
Tween
يستخدم لتحديد نطاق التمويه (من 0 إلى قيمة معينة).
BackdropFilter
الأداة الأساسية لتطبيق تأثير التمويه على العناصر الخلفية.
LinkedScrollControllerGroup
يستخدم لمزامنة التمرير بين قائمتين، واحدة عادية وأخرى تحتوي على Blur.
Timer
يستخدم لإعادة التمويه إلى الصفر بعد توقف التمرير.
مثال على استخدام BackdropFilter لتطبيق Blur
BackdropFilter(
filter: ImageFilter.blur(sigmaX: blurValue, sigmaY: blurValue),
child: Container(
color: Colors.transparent,
),
)
في هذا المثال، يتم تطبيق التمويه على العناصر الموجودة خلف الـ Widget، ويتم التحكم في شدة التمويه من خلال قيمة blurValue.
ما هو دور LinkedScrollControllerGroup؟
في Flutter Blurred ListView يتم استخدام قائمتين:
– القائمة الأساسية – قائمة أخرى فوقها تحتوي على تأثير Blur
وبفضل هذا الربط، تتحرك القائمتان بشكل متزامن، مما يجعل التأثير يبدو طبيعيًا جدًا.
كيف يتم حساب سرعة التمرير؟
– الفرق بين الموضع الحالي والسابق – تقسيمه على الزمن بين التحديثين
ثم يتم استخدام هذه القيمة لتحديد مقدار التمويه:
– سرعة منخفضة → Blur قليل – سرعة عالية → Blur قوي
وهذا ما يجعل Flutter Blurred ListView أكثر واقعية وتفاعلية.
دور AnimationController وTween في التحكم بالتمويه
مثال:
AnimationController controller;
Animation blurAnimation;
blurAnimation = Tween(begin: 0, end: 10).animate(controller);
بهذا الشكل يتم التحكم في زيادة أو تقليل التمويه تدريجيًا أثناء التمرير.
لماذا نستخدم Timer في هذا النوع من التأثيرات؟
هذا يمنع بقاء التمويه بعد توقف التمرير، ويجعل التجربة أكثر طبيعية.
ما هي ميزة Fast Scroll Simulation؟
يمكن استخدامها لتوضيح كيف يتغير Blur حسب سرعة الحركة.
كيفية تنفيذ Flutter Blurred ListView في مشروعك
– إنشاء ListView أساسي – إنشاء ListView آخر بنفس البيانات – ربطهما باستخدام LinkedScrollControllerGroup – استخدام BackdropFilter لتطبيق التمويه – حساب سرعة التمرير – استخدام AnimationController للتحكم في Blur
بهذه الخطوات يمكنك بناء تأثير احترافي بسهولة.
تحسين الأداء عند استخدام Blur
تقليل استخدام Blur
لأن التمويه يستهلك موارد GPU.
استخدام CachedNetworkImage
لتقليل تحميل الصور.
تحديد عناصر محدودة للتأثير
بدلاً من تطبيقه على القائمة بالكامل.
اختبار الأداء على أجهزة مختلفة
للتأكد من السلاسة.
أفضل استخدامات Flutter Blurred ListView
– تطبيقات الأخبار – تطبيقات الصور والمعارض – تطبيقات الفيديو – تطبيقات التواصل الاجتماعي – واجهات Dashboard
أي تطبيق يحتوي على تمرير يمكنه الاستفادة من هذا التأثير.
رابط الكود
https://github.com/Rahiche/a_closer_look_at_the_blur_effect/blob/main/lib/slides/slide_14_motion.dart
رابط المقال
https://github.com/Rahiche/a_closer_look_at_the_blur_effect/blob/main/lib/slides/slide_14_motion.dart
الخلاصة
من خلال الجمع بين AnimationController و BackdropFilter و LinkedScrollControllerGroup، يمكنك إنشاء تجربة مستخدم سلسة وديناميكية تشبه التطبيقات العالمية.
إذا كنت ترغب في تطوير تطبيق أكثر جاذبية وتفاعلية، فإن هذا التأثير يعد خيارًا ممتازًا يستحق التجربة داخل مشاريعك القادمة.
مزيد من المقالات : كيف تجعل تطبيقك أسرع وأخف باستخدام Flutter DevTools؟
