أصبحت تأثيرات الإعجابات العائمة من العناصر الشائعة في التطبيقات الحديثة، خاصة في تطبيقات البث المباشر، الدردشة، الشبكات الاجتماعية، والواجهات التفاعلية. فعندما يضغط المستخدم على زر الإعجاب، تظهر قلوب أو إيموجي أو أيقونات صغيرة تتحرك للأعلى بطريقة جذابة، مما يمنح الواجهة إحساسًا بالحيوية والتفاعل الفوري.

في Flutter يمكن تنفيذ هذا النوع من التأثيرات يدويًا باستخدام AnimationController و Stack و Positioned، لكن ذلك قد يتطلب وقتًا وجهدًا إضافيًا. لذلك تأتي مكتبة floating_likes كحل بسيط وخفيف يساعدك على إضافة تأثير الإعجابات العائمة بسهولة داخل تطبيقك.

floating_likes هي مكتبة Flutter بسيطة وخفيفة مخصصة لعرض تأثيرات الإعجاب العائمة فوق واجهة التطبيق. يمكن استخدامها لعرض قلوب، إيموجي، أيقونات، أو أي Widget مخصص يظهر ويتحرك بطريقة عائمة عند حدوث تفاعل من المستخدم.

تُعد هذه المكتبة مناسبة جدًا لتطبيقات البث المباشر، تطبيقات الدردشة، غرف المحادثة، تطبيقات الفيديو، أو أي واجهة تحتاج إلى ردود فعل مرئية جذابة وسريعة.

الإصدار الأخير المسجل على pub.dev هو:

floating_likes: ^0.0.4

تعتمد المكتبة على عنصرين أساسيين هما:

هذا يجعل استخدامها مباشرًا وسهلًا، حيث تضيف الـ Widget داخل الواجهة ثم تستدعي دالة عرض الإعجاب عند الحاجة.

تتيح لك المكتبة تخصيص شكل الإعجاب العائم بشكل مرن، حيث يمكنك التحكم في:

إذا كنت تريد إضافة تأثير بصري بسيط دون استخدام مكتبات رسوميات كبيرة أو كتابة Animation مخصص من الصفر، فإن floating_likes توفر لك حلًا عمليًا وسريعًا.

تعمل المكتبة بشكل جيد في الواجهات التي تعتمد على التفاعل اللحظي، مثل ضغطات الإعجاب، إرسال ردود الفعل، أو عرض تفاعل المستخدمين أثناء البث.

لإضافة المكتبة إلى مشروع Flutter، افتح ملف pubspec.yaml وأضف السطر التالي داخل قسم dependencies:

dependencies:
  floating_likes: ^0.0.4

بعد ذلك شغّل الأمر التالي لجلب الحزمة:

flutter pub get

ثم قم باستيراد المكتبة داخل ملف Dart:

import 'package:floating_likes/floating_likes.dart';

أفضل طريقة لاستخدام المكتبة هي وضع FloatingLikes داخل Stack حتى تظهر تأثيرات الإعجاب فوق محتوى التطبيق.

import 'package:flutter/material.dart';
import 'package:floating_likes/floating_likes.dart';

final FloatingLikesController _likesController = FloatingLikesController();

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // محتوى التطبيق الأساسي
          const Center(
            child: Text(
              'محتوى التطبيق هنا',
              style: TextStyle(fontSize: 22),
            ),
          ),

          // تأثير الإعجابات العائمة
          FloatingLikes(
            controller: _likesController,
            likeWidget: Image.asset('assets/heart.png'),
            likePosition: const EdgeInsets.only(
              bottom: 20,
              left: 20,
            ),
          ),
        ],
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: () => _likesController.showLike(),
        child: const Icon(Icons.favorite),
      ),
    );
  }
}

في المثال السابق، عند الضغط على زر الإعجاب يتم استدعاء الدالة:

_likesController.showLike();

وبمجرد استدعائها، يظهر عنصر الإعجاب العائم المحدد في likeWidget ويتحرك فوق الواجهة.

لا يشترط أن تستخدم صورة من ملفات المشروع، بل يمكنك استخدام أيقونة جاهزة من Flutter:

FloatingLikes(
  controller: _likesController,
  likeWidget: const Icon(
    Icons.favorite,
    color: Colors.red,
    size: 50,
  ),
  likePosition: const EdgeInsets.only(
    bottom: 40,
    right: 30,
  ),
)

هذا المثال مناسب إذا كنت تريد تأثيرًا بسيطًا دون إضافة ملفات صور داخل مجلد assets.

يمكنك أيضًا استخدام إيموجي كعنصر عائم:

FloatingLikes(
  controller: _likesController,
  likeWidget: const Text(
    '❤️',
    style: TextStyle(fontSize: 40),
  ),
  likePosition: const EdgeInsets.only(
    bottom: 50,
    left: 30,
  ),
)

هذا الخيار مناسب للتطبيقات الخفيفة أو الواجهات التي تعتمد على ردود فعل مرحة مثل القلوب، النار، التصفيق، أو الوجوه التعبيرية.

هذه الخاصية مطلوبة، وهي المسؤولة عن التحكم في ظهور تأثير الإعجاب. يتم إنشاء Controller ثم تمريره إلى Widget.

final FloatingLikesController controller = FloatingLikesController();

ثم يتم تشغيل التأثير باستخدام:

controller.showLike();

تحدد هذه الخاصية العنصر الذي سيظهر كتأثير عائم. يمكن أن يكون صورة، أيقونة، نص، إيموجي، أو Widget مخصص.

likeWidget: Image.asset('assets/heart.png')

تُستخدم هذه الخصائص للتحكم في عرض وارتفاع العنصر العائم. القيمة الافتراضية غالبًا تكون مناسبة، لكن يمكنك تعديلها حسب تصميم التطبيق.

widgetWidth: 60,
widgetHeight: 60,

تحدد مكان ظهور الإعجاب داخل Stack. يمكنك وضعه في الأسفل، الأعلى، اليمين، أو اليسار حسب تصميم الواجهة.

likePosition: const EdgeInsets.only(
  bottom: 30,
  right: 20,
)

تتحكم في مدة تأثير الظهور أو التلاشي. إذا أردت تأثيرًا سريعًا، استخدم مدة قصيرة، وإذا أردت تأثيرًا أكثر نعومة، استخدم مدة أطول.

animationDuration: const Duration(milliseconds: 500),

تتحكم في مدة الحركة الصاعدة للعنصر العائم.

translateDuration: const Duration(seconds: 2),

تحدد منحنى الحركة المستخدم في التأثير. يمكنك استخدام منحنيات Flutter مثل:

curve: Curves.easeInOut,

في المثال التالي نستخدم أيقونة قلب بحجم مخصص ومدة حركة أطول:

FloatingLikes(
  controller: _likesController,
  likeWidget: const Icon(
    Icons.favorite,
    color: Colors.pink,
    size: 45,
  ),
  widgetWidth: 70,
  widgetHeight: 70,
  likePosition: const EdgeInsets.only(
    bottom: 80,
    right: 25,
  ),
  animationDuration: const Duration(milliseconds: 400),
  translateDuration: const Duration(seconds: 2),
  curve: Curves.easeOut,
)

هذا النوع من التخصيص مفيد إذا كنت تريد أن يتناسب التأثير مع هوية التطبيق البصرية أو مع نوع التفاعل داخل الواجهة.

يمكنك استخدام مكتبة floating_likes في العديد من الحالات، مثل:

قبل استخدام المكتبة في تطبيق حقيقي، من الأفضل اختبار عدة نقاط مهمة:

إذا كان تطبيقك يحتاج إلى تأثير إعجابات عائم بسيط وجذاب، فإن مكتبة floating_likes خيار مناسب جدًا. فهي توفر طريقة سهلة لإضافة تفاعل بصري دون كتابة كود Animation طويل.

أما إذا كنت تحتاج إلى نظام تفاعلات معقد يحتوي على مسارات حركة مختلفة، فيزياء مخصصة، أو تحكم متقدم جدًا في كل عنصر، فقد تحتاج إلى بناء Animation خاص بك باستخدام أدوات Flutter الأصلية.

مكتبة floating_likes تقدم طريقة سهلة وخفيفة لإضافة تأثيرات الإعجابات العائمة في تطبيقات Flutter. يمكنك من خلالها عرض قلوب، إيموجي، صور، أو أيقونات تتحرك فوق الواجهة عند حدوث تفاعل من المستخدم.

تتميز المكتبة بسهولة الدمج، قابلية التخصيص، وخفة الاستخدام، مما يجعلها مناسبة لتطبيقات البث المباشر، الدردشة، والتطبيقات الاجتماعية. ومع ذلك، من المهم اختبار الأداء وسلوك الواجهة قبل استخدامها في بيئة الإنتاج، خاصة إذا كان التطبيق يعرض عددًا كبيرًا من التأثيرات في وقت قصير.

إذا كنت تبحث عن طريقة سريعة لإضافة لمسة تفاعلية جميلة إلى تطبيق Flutter، فإن floating_likes تستحق التجربة.