تعديل ايقونه التطبيق App Icon لمنصه IOS و Android في Flutter بدون مكتبات
إن تصميم وتوليد أيقونة تطبيق احترافية هو خطوة أساسية قبل نشر أي تطبيق على المتجرين (Google Play وApp Store). في هذا الدليل ستجد شرحًا مفصّلًا، خطوة بخطوة، يبدأ من تجهيز الصورة الأصلية إلى تحميل الصيغ المناسبة من أدوات مثل Android Asset Studio [وAppIcon.co](http://xn--appicon-kxj.co/) ثم لصقها داخل مجلدات المشروع (Android: app/src/main/res وiOS: Runner/Assets.xcassets).
لماذا لا يكفي مجرد صورة واحدة للأيقونة؟
متاجر التطبيقات والأجهزة تتطلّب أحجامًا وصيغًا متعددة لأن دقة وأبعاد الشاشات تختلف بين الأجهزة (HDPI, XHDPI, XXHDPI, XXXHDPI وغيرها)، كما أن نظام Android يدعم Adaptive Icons (واجهة أمامية وخلفية منفصلتان) بينما iOS يحتاج إلى مجموعة صور داخل AppIcon.appiconset تتضمَّن أحجامًا مختلفة للـ App Store، شاشات العرض، الإشعارات، وشاشة التشغيل.
جهّز صورة رئيسية مربعة (مثلاً 2048×2048 أو 1024×1024) بصيغة PNG مع خلفية شفافة إن أمكن.
اختر مظهر الأيقونة (ممسوحة من الأطراف أم لا، تباين الألوان، وجود ظل أم لا).
إن أردت Adaptive Icon على Android، افصل الطبقات: عنصر أمامي (foreground) يكون عادة PNG أو Vector، وخلفية (background) يمكن أن تكون لونًا أو صورة مسطّحة.
خطوات إنشاء أيقونات Android (Android Asset Studio)
افتح الصفحة: Android Asset Studio — Launcher Icons (الرابط الذي أرسلته).
ارفع الصورة في خانة الـ Foreground أو اختر أيقونة أو Vector. اضبط خيارات القص (crop)، الحواف (trim/pad)، والتأثيرات (shadow أو none).
اختر نوع الأيقونة: Legacy + Adaptive (مستحب) أو Adaptive فقط حسب حاجتك.
اضبط اسم الأيقونة إن رغبت (ic_launcher عادةً).
اضغط Download لتحصل على ملف ZIP يحتوي على مجلدات مثل:
mipmap-mdpi/, mipmap-hdpi/, mipmap-xhdpi/, mipmap-xxhdpi/, mipmap-xxxhdpi/
ملفات ic_launcher.xml (لـ adaptive) و/أو ic_launcher_foreground.png و ic_launcher_background.png.
فك ضغط الملف.
أين تلصق الملفات في مشروع Android؟
افتح مشروعك في Android Studio أو محرر الملفات.
انسخ مجلدات الصور (mipmap-*) والملفات xml الناتجة إلى:
android/app/src/main/res
أو إذا كان مشروع Android عادي (غير Flutter):
app/src/main/res
خطوات إنشاء أيقونات iOS [AppIcon.co]
اختر الصورة الناتجة من الخطوة السابقة وسمّها 1024.png قبل الرفع (بعض مواقع التوليد تطلب ذلك لتوليد أيقونات متجر App Store).
افتح موقع [AppIcon.co](http://appicon.co/) أو أي مولد iOS، ارفع صورة 1024.png، واضبط الخيارات إن وُجدت.
حمّل الناتج كـ ZIP؛ ستجد داخله مجلدًا باسم AppIcon.appiconset يحتوي على ملفات PNG بأحجام مختلفة وملف Contents.json.
لصق ملفات iOS داخل المشروع
افتح مجلد iOS في مشروعك:
ios/Runner/Assets.xcassets
اسحب مجلد AppIcon.appiconset الذي حمّلته إلى داخل Assets.xcassets (استبدل الـ AppIcon القديم إن وُجد).
افتح Xcode، تأكد أن Assets.xcassets يظهر الأيقونات كاملة ومطابقة للأحجام المطلوبة.
قم بعمل Clean ثم Build للمشروع للتأكد من ظهور الأيقونة في المحاكي/الجهاز.
نصائح مهمة لتحسين نتائج التحميل والظهور
استخدم خلفية شفافة إن رغبت بأيقونة نظيفة؛ لكن لـ iOS يجب الانتباه إلى أن App Store يعالج الأيقونات بطريقة معينة، لذا وجود خلفية متناسقة يساعد.
غيّر اسم الملف أو ارفع نسخة جديدة كلما عدّلت التصميم (cache-busting) حتى لا يبقى المتصفح أو النظام يستخدم نسخة قديمة.
اختبر على أجهزة فعلية ومقاسات متعددة للتأكد من وضوح التفاصيل الصغيرة (الخطوط، الرموز).
اجعل التفاصيل في منتصف المربع لتفادي تقطيع الحواف على أجهزة مختلفة أو عند تطبيق أقنعة (mask) في UI.
