القائمة الرئيسية

الصفحات

ارسال اشعار للتطبيق مع امكانية الضغط على الاشعار ونقل البيانات || How to send Notification and Data

ارسال اشعار للتطبيق مع امكانية الضغط على الاشعار ونقل البيانات

ارسال اشعار للتطبيق مع امكانية الضغط على الاشعار ونقل البيانات

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


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

تم تغيير ذلك بواسطة Flutter ، إطار عمل مفتوح المصدر أنشأته Google. Ionic و React Native و Xamarin ليست سوى عدد قليل من الحلول المتاحة للمطورين اليوم لبناء تطبيقات محمولة سريعة تعمل عبر منصات مختلفة. لا تزال Dart ، لغة البرمجة المدمجة في Flutter ، محبوبة ومستخدمة جيدًا.

بالإضافة إلى تطبيقات Android المكتبية الأولية ، فإن Flutter 3 ، الذي تم تقديمه في وقت سابق من هذا العام ، يدعم أيضًا تطبيقات سطح المكتب لنظامي التشغيل MacOS و Linux.


add this packages


dependencies:

  flutter_local_notifications: ^9.6.1

  rxdart: ^0.27.4



How to send Notification and Data


سوف تلاحظ بالكود التالي وجود الامر payload وهو المسؤول عن ارسال تعليمات الى المستخدم ارسال بيانات وهنا قمنا باستخدام dart-rx لتبسيط عملية نقل البيانات عن طريق اخذ البيانات من المستخدم واضافتها بالمكان المناسب لها وبعدها سوف تاتي الى الinit الموجوده في الكود الرئيسي وتقوم بتفعيل خاصية listenNotification وهي المسؤوله عن عملية نقل البيانات من صفحة الى اخرى مع امكانية اظهار البيانات التي تم نقلها عند النقر على الاشعار ويمكنك تنفيذ عملية نقل البيانات باكثر من طريقة ولكن تعد هذه من ابسط الطرق التي يمكنك استخدامها .


How to send Notification and Data

ui.dart


class FullPage extends StatefulWidget {
  const FullPage({Key? key}) : super(key: key);

  @override
  State<FullPage> createState() => _FullPageState();
}

class _FullPageState extends State<FullPage> {

  @override
  void initState() {
    super.initState();
    // Initialization notification plugin
    NotificationApi.init();
    // listen notification is click ? if yes navigate to test page and send data
    listenNotification();
  }

  void listenNotification ()=>
      NotificationApi.onNotifications.stream.listen((event)=>
          navToPush(context, TestPage(text: event!)));


  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:
        MaterialButton(
          color: Colors.blueAccent,
          onPressed: () =>
            NotificationApi.showNotification(title: 'AM', body: 'geecoders is here !',payload: 'GeeCoders'),
          child: const Text('Go to showNotification',style: TextStyle(color: Colors.white),),
        ),
      )
    );
  }
}


class NotificationApi {
  // define notification plugin
  static final _notification = FlutterLocalNotificationsPlugin();
  // onClick Notification ? and send Data .
  static final onNotifications = BehaviorSubject<String?>();

  static Future _notificationDetails() async {
    // channels .
    return const NotificationDetails(
      android: AndroidNotificationDetails(
        'channel id',
        'channel name',
        importance: Importance.max,
        priority: Priority.high,
        // ticker: 'ticker',
      ),
      iOS: IOSNotificationDetails(),
    );
  }

  static Future init({bool initSchedule = false}) async {
    // Initialization
    const android =  AndroidInitializationSettings('@mipmap/ic_launcher');
    const ios =  IOSInitializationSettings();
    const settings = InitializationSettings(android: android,iOS: ios);
    await _notification.initialize(
      settings,
      // on click notification .
      onSelectNotification: (payload) async {
        onNotifications.add(payload);
      },
    );
  }

  // show notification .
  static Future showNotification(
      {String? title,String? body,String? payload , int id=0}) async {
      _notification.show(id, title, body, await _notificationDetails() ,payload: payload);
  }
}


مزيد من المقالات

تعليقات

التنقل السريع