تخصيص الاشعارات واضافة صوره للاشعار في Flutter

Ahmed Mahmoud

اخر تحديث :

تخصيص الاشعارات واضافة صوره للاشعار في Flutter

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

تُستخدم الآن أفضل أطر تطوير التطبيقات عبر الأنظمة الأساسية من قبل شركات تطوير تطبيقات الأجهزة المحمولة الرائدة في الولايات المتحدة ، بما في ذلك PhoneGap و Xamarin و Flutter و React Native ، من بين آخرين.

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

نظرًا لأنه يتعين على المطورين القيام بقدر أقل من الترميز ، فإنه يُعرف أيضًا باسم لغة تطوير التطبيقات الصديقة للمطورين. على الرغم من أن Flutter يجعل إنشاء تطبيقات الأجهزة المحمولة أمرًا بسيطًا ، إلا أن له مزايا وعيوب.

Add Custom image to notification after send

في هذا الجزء سوف نقوم بعمل متغير يحمل ايقونة الشعار الجانبية وايضا متغير يحمل الصورة العريضه التي سوف نقوم بعرضها للمستخدم , وبعدها سوف نستخدم الclass الذي سوف نوفره لكم في الجزء التالي وهو مخصص لقراءة الصورة من الانترنت وعرضها ومعرفة الاسم والمسار الخاص بها ليساعدك في عملية عرض الصورة بجانب الشعار كما هو موضح بالصورة الخاصه بالمقاله .

ui.dart

 static Future _notificationDetails() async {
    // small image for notification
    final largeIconPath = await Utils.downloadFile(
        'https://images.unsplash.com/photo-1656828051768-5ef859415a89?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80',
        'largeIconPath');

    // big image for notification
    final bigPicture = await Utils.downloadFile(
        'https://images.unsplash.com/photo-1656824249722-65d681fbde4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60',
        'bigPicture');

    // style notification ( small icon and large after swipe )
    final styleInformation = BigPictureStyleInformation(
      FilePathAndroidBitmap(bigPicture),
      largeIcon: FilePathAndroidBitmap(largeIconPath),
    );

    String sound = 'sound.wav';
    // channels .
    return NotificationDetails(
      android: AndroidNotificationDetails(
        // If you want to show the entire notification instead of a specific part disable Importance.max and change id channel etc => id 2
        'channel id 3',
        'channel name',
        // add image to notification
        styleInformation: styleInformation,
        importance: Importance.max,
        priority: Priority.high,
      ),
      iOS: const IOSNotificationDetails(
      ),
    );
  }

Get image from internet

سوف تحتاج الى تثبيت المكتبات التاليه لديك في المشروع الذي تعمل عليه لكي تساعدك في عملية عرض صورة من الانترنت ووضعها في الاشعارات التي تقوم بإرسالها للمستخدم وبعدها سوف نقوم بعمل class مخصص للصور من الانترنت كما هو موضح بالكود التالي يمكنك نسخ الكود كامل ولصقه لديك في المشروع الذي تعمل عليه .

# show image
http: ^0.13.4
path_provider: ^2.0.11

Utils.dart

import 'dart:io';
import 'package:path_provider/path_provider.dart';
import 'package:http/http.dart' as http;

class Utils{
  static Future<String> downloadFile(String url,String fileName) async {
    final directory = await getApplicationDocumentsDirectory();
    final filePath = '${directory.path}/$fileName';
    final response = await http.get(Uri.parse(url));
    final file = File(filePath);
    await file.writeAsBytes(response.bodyBytes);
    return filePath;
  }
}