เมื่อฉันสร้างแอพที่มีflutter createคำสั่งโลโก้โลโก้พลิ้วจะใช้เป็นไอคอนแอปพลิเคชันสำหรับทั้งสองแพลตฟอร์ม

หากฉันต้องการเปลี่ยนไอคอนแอพฉันจะไปยังไดเรกทอรีแพลตฟอร์มทั้งสองและแทนที่ภาพที่นั่นหรือไม่โดยไดเรกทอรีแพลตฟอร์มที่ฉันหมายถึง myapp/ios/Runner/Assets.xcassets/AppIcon.appiconsetสำหรับ iOS และmyapp/android/app/src/main/resAndroid

หรือเป็นไปได้ที่จะกำหนดภาพเป็นสินทรัพย์ Flutterและไอคอนถูกสร้างขึ้นอย่างใด?

ไอคอนตัวเปิด Flutter ได้รับการออกแบบมาเพื่อช่วยสร้างไอคอนตัวเรียกใช้สำหรับทั้ง Android และ iOS อย่างรวดเร็ว: https://pub.dartlang.org/packages/flutter_launcher_icons

• เพิ่มแพ็คเกจลงในไฟล์ pubspec.yaml ของคุณ (ภายในโครงการ Flutter ของคุณ) เพื่อใช้งาน
• ภายในไฟล์ pubspec.yaml ให้ระบุเส้นทางของไอคอนที่คุณต้องการใช้สำหรับแอพแล้วเลือกว่าคุณต้องการใช้ไอคอนสำหรับแอพ iOS, แอพ Android หรือทั้งสองอย่าง
• เรียกใช้แพคเกจ
• Voila! ไอคอนตัวเรียกใช้เริ่มต้นได้ถูกแทนที่ด้วยไอคอนที่กำหนดเองของคุณแล้ว

ฉันหวังว่าจะเพิ่มวิดีโอลงใน GitHub README เพื่อสาธิต

แสดงวีดีโอวิธีการเรียกใช้เครื่องมือที่สามารถพบได้ที่นี่

หากใครต้องการจะชี้ให้เห็นข้อบกพร่องการปรับปรุง / รายงานโปรดเพิ่มเป็นปัญหาในโครงการ GitHub

อัปเดต:ตั้งแต่วันพุธที่ 24 มกราคม 2018 คุณควรจะสามารถสร้างไอคอนใหม่โดยไม่แทนที่ไอคอนตัวเรียกใช้เดิมที่มีอยู่ในโครงการ Flutter ของคุณ

อัปเดต 2:ตั้งแต่วันที่ v0.4.0 (8 มิถุนายน 2018) คุณสามารถระบุหนึ่งภาพสำหรับไอคอน Android ของคุณและภาพแยกต่างหากสำหรับไอคอน iOS ของคุณ

อัปเดต 3:ตั้งแต่วันที่ v0.5.2 (20 มิถุนายน 2561) คุณสามารถเพิ่มไอคอนตัวเรียกใช้งานที่ปรับได้สำหรับแอพ Android ของโครงการ Flutter ของคุณ

การตั้งค่าไอคอนตัวเรียกใช้เหมือนนักพัฒนาระบบ

ฉันมีปัญหาในการใช้และทำความเข้าใจกับแพ็คเกจflutter_launcher_icons คำตอบนี้เป็นวิธีที่คุณจะทำถ้าคุณสร้างแอพสำหรับ Android หรือ iOS มันค่อนข้างเร็วและง่ายเมื่อคุณทำเสร็จสองสามครั้ง

Android

ไอคอนตัวเรียกใช้ Android นั้นมีทั้งส่วนหน้าและเลเยอร์พื้นหลัง

(ภาพดัดแปลงมาจากเอกสาร Android )

วิธีที่ง่ายที่สุดในการสร้างไอคอนเรียกใช้งานสำหรับ Android คือการใช้ Asset Studio ที่มีอยู่ใน Android Studio คุณไม่จำเป็นต้องออกจากโครงการ Flutter ของคุณ (ผู้ใช้รหัส VS คุณอาจลองใช้ Android Studio สำหรับขั้นตอนนี้สะดวกและไม่ต้องคุ้นเคยกับ IDE ตัวอื่น)

คลิกขวาที่androidโฟลเดอร์ในโครงร่างโครงการ ไปที่ใหม่> ภาพสินทรัพย์ (ลองคลิกขวาที่android/appโฟลเดอร์หากคุณไม่เห็นตัวเลือกภาพสินทรัพย์ ) ตอนนี้คุณสามารถเลือกภาพเพื่อสร้างไอคอนตัวเรียกใช้ของคุณจาก

หมายเหตุ:ผมมักจะใช้1024x1024ภาพพิกเซล 512x512แต่คุณแน่นอนควรใช้อะไรขนาดเล็กที่ หากคุณใช้ Gimp หรือ Inkscape คุณควรมีสองเลเยอร์หนึ่งอันสำหรับพื้นหน้าและอีกอันสำหรับพื้นหลัง รูปภาพเบื้องหน้าควรมีพื้นที่โปร่งใสสำหรับเลเยอร์พื้นหลังให้แสดง

(ภาพตัดปะสิงโตจากที่นี่ )

สิ่งนี้จะแทนที่ไอคอนตัวเรียกใช้ปัจจุบัน คุณสามารถค้นหาไอคอนที่สร้างขึ้นในmipmapโฟลเดอร์:

หากคุณต้องการสร้างไอคอนตัวเรียกใช้งานด้วยตนเองดูคำตอบนี้เพื่อขอความช่วยเหลือ

สุดท้ายตรวจสอบให้แน่ใจว่าชื่อไอคอนตัวเรียกใช้งานใน AndroidManifest เหมือนกับชื่อที่คุณเรียกไว้ด้านบน ( ic_launcherโดยค่าเริ่มต้น):

application android:icon="@mipmap/ic_launcher"

รันแอพในอีมูเลเตอร์เพื่อยืนยันว่าไอคอนตัวเรียกใช้สร้างขึ้นสำเร็จ

iOS

ฉันมักจะใช้เพื่อเป็นรายบุคคลปรับขนาดไอคอน iOS ของฉันด้วยมือ แต่ถ้าคุณมี Mac มี app ฟรีใน Mac App Store ที่เรียกว่าชุดไอคอนผู้สร้าง คุณให้ภาพ (อย่างน้อย1024x1024พิกเซล) และมันจะคายขนาดทั้งหมดที่คุณต้องการ (รวมถึงContents.jsonไฟล์) ขอบคุณคำตอบนี้สำหรับคำแนะนำ

ไอคอน iOS ไม่ควรมีความโปร่งใส ดูคำแนะนำเพิ่มเติมที่นี่

หลังจากที่คุณสร้างชุดไอคอนให้เริ่ม Xcode (สมมติว่าคุณมี Mac) และใช้มันเพื่อเปิดiosโฟลเดอร์ในโครงการ Flutter ของคุณ จากนั้นไปที่Runner> Assets.xcassetsและลบรายการ AppIcon

หลังจากนั้นคลิกขวาและเลือกนำเข้า ... เลือกชุดไอคอนที่คุณเพิ่งสร้างขึ้น

แค่นั้นแหละ. ยืนยันว่าไอคอนถูกสร้างขึ้นโดยเรียกใช้แอพในเครื่องจำลอง

หากคุณไม่มี Mac ...

คุณยังสามารถสร้างรูปภาพทั้งหมดด้วยมือ ios/Runner/Assets.xcassets/AppIcon.appiconsetในโครงการกระพือของคุณไป

ขนาดรูปภาพที่คุณต้องการคือขนาดคูณในชื่อไฟล์ ตัวอย่างเช่นIcon-App-29x29@3x.pngจะเป็น29เวลา3นั่นคือ87พิกเซลสี่เหลี่ยม คุณต้องใช้ชื่อไอคอนเดิมหรือแก้ไขไฟล์ JSON

ทำตามขั้นตอนง่าย ๆ :

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

2. เตรียมไอคอนแอพสำหรับเส้นทางที่ระบุ e.g. icon/icon.png

3. ดำเนินการคำสั่งบนเทอร์มินัลเพื่อสร้างไอคอนแอป:

$ flutter pub get

$ flutter pub pub run flutter_launcher_icons:main

ในการตรวจสอบตัวเลือกที่มีทั้งหมดและการตั้งค่าไอคอนต่าง ๆ สำหรับ Android และ iOS โปรดอ้างอิงสิ่งนี้

หวังว่านี่จะช่วยผู้อื่น

คุณต้องแทนที่ไฟล์ไอคอน Flutter ด้วยภาพของคุณเอง ไซต์นี้จะช่วยให้คุณเปลี่ยน png ของคุณเป็นไอคอนตัวเรียกใช้ที่มีขนาดต่าง ๆ :

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

ฉันขอแนะนำให้คุณใช้เว็บไซต์นี้ลิงค์ด้านล่าง

ผู้สร้างไอคอนแอป

ขั้นตอนที่ 1: อัปโหลดภาพ

ขั้นตอนที่ 2: ทำการเปลี่ยนแปลงที่จำเป็นและคลิกที่ดาวน์โหลด (อย่าเปลี่ยนชื่อไฟล์)

ขั้นตอนที่ 3: แยกไฟล์ซิปที่ดาวน์โหลดมาในโฟลเดอร์ที่เกี่ยวข้อง

android/app/src/main/res

ฉันเปลี่ยนมันในขั้นตอนต่อไปนี้:

1) โปรดเพิ่มการพึ่งพานี้ในหน้า pubspec.yaml ของคุณ

 dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.7.4

2) คุณต้องอัปโหลดรูปภาพ / ไอคอนในโครงการของคุณซึ่งคุณต้องการดูเป็นไอคอนตัวเรียกใช้ (ฉันได้สร้างชื่อโฟลเดอร์: ภาพในโครงการของฉันแล้วอัปโหลด logo.png ในโฟลเดอร์ภาพ) ตอนนี้คุณต้องเพิ่มรหัสด้านล่างและวางเส้นทางภาพของคุณใน 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

5) เสร็จแล้ว

หมายเหตุ: (แน่นอนเพิ่มการอ้างอิงที่อัปเดตจาก

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

)

วิธีที่ดีที่สุด & แนะนำเพื่อตั้งค่าไอคอนแอปใน Flutter

ฉันพบปลั๊กอินหนึ่งรายการเพื่อตั้งค่าไอคอนแอปพลิเคชั่นใน flutter ชื่อ“ flutter_launcher_icons” เราจะใช้ปลั๊กอินนี้เพื่อตั้งค่าไอคอนแอพพลิเคชั่น

1. เพิ่มปลั๊กอินนี้ในไฟล์ pubspec.yaml ในไดเรกทอรีรากของโครงการ กรุณาตรวจสอบรหัสด้านล่าง

   การพึ่งพา:
   กระพือ:
   sdk: กระพือ
   cupertino_icons: ^ 0.1.2
   flutter_launcher_icons: ^ 0.7.2 + 1

บันทึกไฟล์และเรียกใช้ flutter pub get on terminal

2. สร้างเนื้อหาโฟลเดอร์ในรูทของโครงการในโฟลเดอร์สินทรัพย์ยังสร้างไอคอนโฟลเดอร์และวางไอคอนแอพของคุณไว้ในโฟลเดอร์นี้ ฉันจะแนะนำให้กับผู้ใช้ขนาดไอคอนแอป 1024x1024 ฉันวางไอคอนแอพไว้ในโฟลเดอร์ไอคอนและตอนนี้ฉันมีพา ธ ไอคอนแอปเป็นสินทรัพย์ / ไอคอน / icon.png

3. ตอนนี้ใน pubspec.yaml เพิ่มรหัสด้านล่าง

   flutter_icons:
   android: "launcher_icon"
   ios: true
   image_path: "assets / icon / icon.png"

4. บันทึกไฟล์และเรียกใช้ flutter pub get on terminal หลังจากรันคำสั่งรันคำสั่งที่สองดังต่อไปนี้

   flutter pub run flutter_launcher_icons: main -f pubspec.yaml

จากนั้นเรียกใช้แอป

วิธีที่ดีที่สุดคือเปลี่ยนไอคอนตัวเรียกใช้งานแยกต่างหากสำหรับทั้ง iOS และ Android

เปลี่ยนไอคอนในโมดูล iOS และ Android แยกกัน ปลั๊กอินสร้างไอคอนขนาดแตกต่างจากไอคอนเดียวกันซึ่งมีการบิดเบือน

ตามลิงค์นี้: https://flutter.dev/docs/deployment/android

คุณสามารถทำได้โดยใช้ flutter_launcher_icons ใน pubspec.yaml

อีกวิธีหนึ่งคือใช้หนึ่งสำหรับ Android และอีกวิธีหนึ่งสำหรับ iOS