फ़्लटर पर एप्लिकेशन लॉन्चर आइकन कैसे बदलें?


196

जब मैं flutter createकमांड के साथ एक ऐप बनाता हूं , तो फ़्लटर लोगो का उपयोग दोनों प्लेटफार्मों के लिए एप्लिकेशन आइकन के रूप में किया जाता है।

अगर मुझे ऐप आइकन बदलना है, तो क्या मुझे दोनों प्लेटफॉर्म निर्देशिकाओं में जाना होगा और वहां छवियों को बदलना होगा ?, प्लेटफार्मों निर्देशिकाओं द्वारा मेरा मतलब है myapp/ios/Runner/Assets.xcassets/AppIcon.appiconsetकि आईओएस और myapp/android/app/src/main/resएंड्रॉइड के लिए।

या क्या किसी छवि को फ़्लटर एसेट के रूप में परिभाषित करना संभव है और आइकन किसी भी तरह से उत्पन्न होते हैं?


आप दो तरीकों से एपिकॉन को अपडेट कर सकते हैं, मैंने दोनों तरह की जाँच का
मयूर दबी

जवाबों:


233

फ़्लटर लॉन्चर आइकनों को एंड्रॉइड और आईओएस दोनों के लिए लॉन्चर आइकन जल्दी से तैयार करने में मदद करने के लिए डिज़ाइन किया गया है: https://pub.dartlang.org/packages/flutter_launcher_icons

  • इसका उपयोग करने के लिए अपने pubspec.yaml फ़ाइल (अपने फ़्लटर प्रोजेक्ट के भीतर) में पैकेज जोड़ें
  • Pubspec.yaml फ़ाइल के भीतर उस आइकन का पथ निर्दिष्ट करें जिसे आप ऐप के लिए उपयोग करना चाहते हैं और फिर चुनें कि क्या आप आईओएस ऐप, एंड्रॉइड ऐप या दोनों के लिए आइकन का उपयोग करना चाहते हैं।
  • पैकेज चलाएं
  • देखा! डिफ़ॉल्ट लॉन्चर आइकन को अब आपके कस्टम आइकन से बदल दिया गया है

मैं इसे प्रदर्शित करने के लिए GitHub README में एक वीडियो जोड़ने की उम्मीद कर रहा हूं

टूल को चलाने का तरीका दिखाने वाला वीडियो यहां पाया जा सकता है

यदि कोई सुधार / रिपोर्ट बग्स का सुझाव देना चाहता है, तो कृपया इसे GitHub प्रोजेक्ट पर एक समस्या के रूप में जोड़ें

अपडेट: बुधवार २४ जनवरी २०१ 24 तक, आपको अपने फ़्लटर प्रोजेक्ट में पुराने मौजूदा लॉन्चर आइकनों को ओवरराइड किए बिना नए आइकन बनाने में सक्षम होना चाहिए।

अपडेट 2: v0.4.0 (8 जून 2018) तक आप अपने एंड्रॉइड आइकन के लिए एक छवि और अपने आईओएस आइकन के लिए एक अलग छवि निर्दिष्ट कर सकते हैं।

अपडेट 3: v0.5.2 (20 जून, 2018) के अनुसार अब आप अपने स्पंदन प्रोजेक्ट के एंड्रॉइड ऐप के लिए अनुकूली लॉन्चर आइकन जोड़ सकते हैं


1
क्या छवि के लिए कोई आवश्यकता है?
कैमिनो

1
मैं केवल, एक आकार के लिए एक संदर्भ पाया 710x599। उसे चुनने का क्या कारण था? मुझे उम्मीद है 512x512या 1000x1000वैसे भी कुछ वर्ग होगा।
सुरगाछ

1
@Suragch ने Google पर एक आइकन की त्वरित खोज की, ताकि मैं जल्दी से इसका परीक्षण कर सकूं। मैंने दो अन्य आइकन आकारों को शामिल किया ताकि लोग पैकेज (1024x1024 और 128x128) को आज़मा सकें, आप इन्हें यहाँ पा सकते हैं: github.com/fluttercommunity/flutter_launcher_icons/tree/master/ ...
मार्क

2
क्या मैं सुझाव दे सकता हूं कि संकुल read.me को छवियों के आकार पर सिफारिशें प्रदान करनी चाहिए।
ब्रेट सटन

1
यह मेरे द्वारा अब तक मिली सबसे अच्छी चीजों में से एक है। श्रीमान धन्यवाद!
besil

133

देशी डेवलपर की तरह लॉन्चर आइकन सेट करना

मुझे flutter_launcher_icons पैकेज का उपयोग करने और समझने में कुछ परेशानी हो रही थी । यदि आप एंड्रॉइड या आईओएस के लिए एक ऐप बना रहे हैं, तो इसका उत्तर यह है कि आप इसे कैसे करेंगे। यह बहुत तेज़ और आसान है जब आप इसे कुछ बार कर चुके होते हैं।

एंड्रॉयड

एंड्रॉइड लॉन्चर आइकन में एक अग्रभूमि और एक पृष्ठभूमि परत दोनों हैं।

यहां छवि विवरण दर्ज करें

( Android डॉक्यूमेंटेशन से अनुकूलित छवि )

एंड्रॉइड के लिए लॉन्चर आइकन बनाने का सबसे आसान तरीका एसेट स्टूडियो का उपयोग करना है जो एंड्रॉइड स्टूडियो में सही उपलब्ध है। तुम भी अपने स्पंदन परियोजना को छोड़ने की जरूरत नहीं है। (वीएस कोड उपयोगकर्ता, आप इस कदम के लिए केवल एंड्रॉइड स्टूडियो का उपयोग करने पर विचार कर सकते हैं। यह वास्तव में बहुत सुविधाजनक है और यह एक अन्य ईई के साथ परिचित होने के लिए चोट नहीं करता है।)

androidप्रोजेक्ट की रूपरेखा में फ़ोल्डर पर राइट क्लिक करें । पर जाएं न्यू> छवि एसेट । ( android/appयदि आप छवि एसेट को एक विकल्प के रूप में नहीं देखते हैं, तो फ़ोल्डर पर राइट क्लिक करने का प्रयास करें । अब आप अपने लॉन्चर आइकन को बनाने के लिए एक छवि का चयन कर सकते हैं।

नोट: मैं आमतौर पर एक 1024x1024पिक्सेल छवि का उपयोग करता हूं लेकिन आपको निश्चित रूप से कुछ भी छोटा उपयोग नहीं करना चाहिए 512x512। यदि आप जिम्प या इंकस्केप का उपयोग कर रहे हैं, तो आपके पास दो परतें होनी चाहिए, एक अग्रभूमि के लिए और एक पृष्ठभूमि के लिए। अग्रभूमि छवि में पृष्ठभूमि परत के माध्यम से दिखाने के लिए पारदर्शी क्षेत्र होना चाहिए।

यहां छवि विवरण दर्ज करें

( यहां से शेर क्लिपरट )

यह वर्तमान लॉन्चर आइकन की जगह लेगा। आप mipmapफ़ोल्डर में उत्पन्न आइकन पा सकते हैं :

यदि आप मैन्युअल रूप से लॉन्चर आइकन बनाना पसंद करते हैं, तो सहायता के लिए यह उत्तर देखें ।

अंत में, सुनिश्चित करें कि AndroidManifest में लॉन्चर आइकन नाम वही है जो आपने इसे ऊपर कहा था ( ic_launcherडिफ़ॉल्ट रूप से):

application android:icon="@mipmap/ic_launcher"

लॉन्चर आइकन सफलतापूर्वक बनाया गया था, इसकी पुष्टि करने के लिए एमुलेटर में ऐप चलाएं।

आईओएस

मैं हमेशा अपने iOS आइकनों को व्यक्तिगत रूप से हाथ से उपयोग करता था, लेकिन यदि आपके पास मैक है, तो मैक ऐप स्टोर में एक मुफ्त ऐप है जिसे आइकॉन सेट क्रिएटर कहा जाता है । आप इसे एक छवि देते हैं (कम से कम 1024x1024पिक्सल) और यह उन सभी आकारों को थूक देगा जिनकी आपको आवश्यकता है (प्लस Contents.jsonफ़ाइल)। सुझाव के लिए इस उत्तर के लिए धन्यवाद ।

iOS आइकन में कोई पारदर्शिता नहीं होनी चाहिए। यहां और दिशानिर्देश देखें ।

जब आप आइकन सेट बना लेते हैं, तो Xcode शुरू करें (मान लें कि आपके पास मैक है) और इसका उपयोग iosअपने फ़्लटर प्रोजेक्ट में फ़ोल्डर खोलने के लिए करें। फिर Runner> Assets.xcassets पर जाएं और AppIcon आइटम को हटाएं।

यहां छवि विवरण दर्ज करें

इसके बाद राइट क्लिक करें और चुनें आयात करें ... । आपके द्वारा अभी बनाया गया आइकन सेट चुनें।

बस। पुष्टि करें कि आइकन सिम्युलेटर में ऐप चलाकर बनाया गया था।

यदि आपके पास मैक नहीं है ...

आप अभी भी सभी चित्र हाथ से बना सकते हैं। अपने स्पंदन परियोजना में जाना ios/Runner/Assets.xcassets/AppIcon.appiconset

आपको जिस छवि आकार की आवश्यकता है, वह फ़ाइल नाम में गुणा आकार है। उदाहरण के लिए, Icon-App-29x29@3x.pngहो सकता है 29कई बार 3, यह है कि, 87वर्ग पिक्सेल। आपको या तो एक ही आइकन नाम रखने या JSON फ़ाइल को संपादित करने की आवश्यकता है।


1
यदि आप इसे समझने के लिए संघर्ष कर रहे थे, तो मुझे आपके किसी भी प्रश्न का उत्तर देने में खुशी होगी। एक मुद्दा खोलें और मैं आपको इसके बारे में बताऊंगा
मार्क O'Sullivan

2
@ MarkO'Sullivan, धन्यवाद। मेरा अनुमान है कि पैकेज ठीक है। यह सिर्फ इतना है कि प्रलेखन मेरे लिए कठिन था। उदाहरण के लिए, प्रारंभिक छवि के लिए किस आकार का उपयोग करना है, क्या पृष्ठभूमि परतें एंड्रॉइड के लिए बनाई जा रही हैं, आदि। यह प्रक्रिया के माध्यम से शुरुआत करने के लिए विस्तृत ट्यूटोरियल के लिए वास्तव में उपयोगी होगा।
सुरगाच

पैकेज के लिए अच्छा विकल्प, जो आधिकारिक नहीं है, अब काम नहीं करता है, और 6 महीने से अपडेट नहीं किया गया है ...
Yann39

1
इससे मदद मिली। एंड्रॉइड स्टूडियो के भीतर, इमेज एसेट जोड़ने का कोई विकल्प नहीं है । मैं एक github / स्पंदन समस्या से सीखा आस-पास का काम / एंड्रॉइड स्टूडियो के भीतर एक मानक "एंड्रॉइड" परियोजना के रूप में / एंड्रॉइड फ़ोल्डर (फ्लैटर प्रोजेक्ट के भीतर) को खोलना है। जब आप / res फ़ोल्डर पर राइट-क्लिक करेंगे तो विकल्प दिखाई देगा।
MwamiTovi

2
@MwamiTovi सही है, हालाँकि आपको राइट-क्लिक करने या मैन्युअल रूप से सिंक करने से पहले ग्रेडल सिंक की प्रतीक्षा करनी होगी, अन्यथा "नई -> छवि संपत्ति" नहीं दिखाई देगी।
डैनियल

109

सरल चरणों का पालन करें:

  1. में flutter_launcher_iconsप्लगइन जोड़ेंpubspec.yaml

जैसे

dev_dependencies: 
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: ^0.7.5

flutter_icons:
  image_path: "icon/icon.png" 
  android: true
  ios: true
  1. निर्दिष्ट पथ के लिए एक ऐप आइकन तैयार करें। e.g. icon/icon.png

  2. एप्लिकेशन आइकन बनाने के लिए टर्मिनल पर निष्पादित कमांड:

$ flutter pub get

$ flutter pub pub run flutter_launcher_icons:main

सभी उपलब्ध विकल्पों की जांच की जांच और उन्हें Android और iOS देखें विभिन्न आइकन स्थापित करने के लिए इस

आशा है कि यह दूसरों की मदद करेगा।


4
यह मेरे लिए काम किया; केवल एक बार मैं उस अंतिम पंक्ति को चलाऊंगा flutter pub pub run flutter_launcher_icons:main। पारितोषिक के लिए धन्यवाद!
जैतून 24

3
मुझे त्रुटियाँ मिलती हैं android.dart: 164: 25: त्रुटि: बहुत अधिक स्थितिगत तर्क: 1 की अनुमति है, लेकिन 4 पाए गए।
ir2pid

अगर डार्कमोड सक्रिय है तो मैं आइकन स्विच कर सकता हूं?
मैक्सिमिलियानो सोसा

1
@ ir2pid त्रुटि को हल करने के लिए आपको flutter_launcher_icons के रूप में संस्करण को अपडेट करने की आवश्यकता है:
0.7.5

29

आपको फ़्लटर आइकन फ़ाइलों को अपनी खुद की छवियों के साथ बदलना होगा। यह साइट विभिन्न आकारों के लॉन्चर आइकन में आपके png को चालू करने में आपकी सहायता करेगी:

https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html


2
आपका लिंक केवल Android आइकनों के लिए सही आकार का उत्पादन करता है
मार्क ओ'सुल्लिवन

17

मैंने इसे निम्नलिखित चरणों में बदल दिया है:

1) कृपया अपने pubspec.yaml पेज पर इस निर्भरता को जोड़ें

 dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.7.4

2) आपको अपने प्रोजेक्ट पर एक इमेज / आइकन अपलोड करना है जिसे आप लॉन्चर आइकन के रूप में देखना चाहते हैं। (मैंने एक फ़ोल्डर नाम बनाया है: मेरी परियोजना में छवि तब लोगो अपलोड करें। छवि फ़ोल्डर में रखें)। अब आपको नीचे दिए गए कोड जोड़ने होंगे और image_path: pubspec.yaml पेज पर अपनी छवि पथ पेस्ट करना होगा।

flutter_icons:
  image_path: "images/logo.png"
  android: true
  ios: true

3) टर्मिनल पर जाएं और इस कमांड को निष्पादित करें:

flutter pub get

4) कमांड निष्पादित करने के बाद, नीचे कमांड दर्ज करें:

flutter pub run flutter_launcher_icons:main

५) हो गया

NB: (बेशक से एक अद्यतन निर्भरता जोड़ें

https://pub.dev/packages/flutter_launcher_icons#-installing-tab-

)


17

मैं आपको नीचे दिए गए इस वेबसाइट का उपयोग करने का सुझाव दूंगा

ऐप आइकन निर्माता

चरण -1: छवि अपलोड करें,

चरण -2: आवश्यक परिवर्तन करें और डाउनलोड पर क्लिक करें (फ़ाइल का नाम न बदलें)

चरण -3: संबंधित फ़ोल्डर में डाउनलोड की गई ज़िप फ़ाइल निकालें

android/app/src/main/res

3
यह सुझाव IOS
evals

2
इस समाधान ने मेरे लिए काम किया (केवल Android को लक्षित किया)
dark_ruby

1
एक बहुत अच्छा समाधान।
मयंक एम।

4

स्पंदन में ऐप आइकन सेट करने का सबसे अच्छा और अनुशंसित तरीका।

मुझे "flutter_launcher_icons" नाम के स्पंदन में ऐप आइकन सेट करने के लिए एक प्लगइन मिला। हम ऐपल आइकन को फ़्लटर में सेट करने के लिए इस प्लगइन का उपयोग करेंगे।

  1. प्रोजेक्ट रूट डायरेक्टरी में pubspec.yaml फ़ाइल में इस प्लगइन को जोड़ें। कृपया नीचे कोड देखें,

    निर्भरताएँ:
    स्पंदन:
    sdk: स्पंदन
    cupertino_icons: ^ 0.1.2
    flutter_launcher_icons: ^ 0.7.2 + 1

फ़ाइल को सहेजें और टर्मिनल पर फ़्लटर पब प्राप्त करें।

  1. फ़ोल्डर की संपत्ति में परियोजना की जड़ में एक फ़ोल्डर संपत्ति बनाएँ एक फ़ोल्डर आइकन भी बनाएं और इस फ़ोल्डर के अंदर अपना ऐप आइकन रखें। मैं यूज़र 1024x1024 ऐप आइकन साइज़ की सिफारिश करूँगा। मैंने आइकन आइकन के अंदर ऐप आइकन रखा है और अब मेरे पास संपत्ति / आइकन / icon.png के रूप में ऐप आइकन पथ है

  2. अब, pubspec.yaml में निम्न कोड जोड़ें,

    flutter_icons:
    android: "launcher_icon"
    ios: सच्ची
    छवि_पथ: "संपत्ति / आइकन / आइकन। पीपी"

  3. फ़ाइल को सहेजें और फ़्लटर पब को टर्मिनल पर प्राप्त करें। रनिंग कमांड चलाने के बाद नीचे के रूप में दूसरी कमांड चलाएं

    स्पंदन पब रन flutter_launcher_icons: मुख्य -f pubspec.yaml

इसके बाद App को रन करें


यद्यपि आपने उसी पुराने सही उत्तर का उत्तर दिया था, कम से कम आपने उस के मुख्य बिंदुओं पर प्रकाश डाला।
फेलिप अगस्टो

0

सबसे अच्छा तरीका है कि आईओएस और एंड्रॉइड दोनों के लिए अलग से लॉन्चर आइकन बदलें।

आईओएस और एंड्रॉइड मॉड्यूल में अलग से आइकन बदलें। प्लगइन एक ही आइकन से विभिन्न आकार के आइकन बनाता है जो विकृत होते हैं।

इस लिंक का पालन करें: https://flutter.dev/docs/deployment/android


-5

आप pubspec.yaml में flutter_launcher_icons का उपयोग करके इसे प्राप्त कर सकते हैं

दूसरा तरीका Android के लिए एक और iOS के लिए एक और एक का उपयोग करना है

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.