และวิธีแก้ไขปัญหาทั่วไปที่คุณอาจเผชิญ

ฉันเพิ่งทำงานในโปรเจ็กต์ Flutter ซึ่งฉันต้องการงานง่ายๆ ในการเพิ่มไอคอนตัวเรียกใช้งานแอป

ตอนนั้นฉันเพิ่งเริ่มใช้ Flutter ดังนั้นฉันจึงเริ่มต้นด้วยการค้นหาวิธีที่ดีที่สุดในการบรรลุ นำไปใช้ และบันทึกงานนี้

ด้วยเหตุนี้ฉันจึงสร้างบทความนี้ขึ้นมา

วันนี้คุณจะได้เรียนรู้สองวิธีในการเพิ่มไอคอนตัวเรียกใช้งานแอปใน Flutter และวิธีแก้ไขปัญหาทั่วไปที่คุณอาจเผชิญในกระบวนการนี้

ความต้องการ

  • ios.png

  • background.png (ต้องทึบแสงเต็มที่ 110x110px)

1. ใช้แพ็คเกจ flutter_launcher_icons

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

ตั้งค่าไฟล์กำหนดค่าเริ่มต้น

  • dev_dependencies: flutter_launcher_icons: “0.9.0”: นี่คือเวอร์ชันแพ็คเกจที่คุณต้องการติดตั้ง หากคุณต้องการติดตั้งอันล่าสุด คุณสามารถทำสิ่งนี้ได้
...
dev_dependencies:  
    flutter_launcher_icons:

ในข้อมูลโค้ดด้านบน เราไม่ได้ระบุเวอร์ชันของปลั๊กอิน มันจะได้อันสุดท้าย

  • android: true and ios: true: แทนที่ไอคอนตัวเรียกใช้ Flutter เริ่มต้นที่มีอยู่สำหรับแต่ละแพลตฟอร์ม
  • image_path_ios: ตำแหน่งของไฟล์ภาพไอคอนที่คุณต้องการใช้เป็นไอคอนเครื่องเรียกใช้งานแอปบน iOS
  • image_path_android: ตำแหน่งของไฟล์ภาพไอคอนที่คุณต้องการใช้เป็นไอคอนเครื่องเรียกใช้งานแอปบน iOS

รันแพ็คเกจและสร้างแอป

flutter pub get
flutter pub run flutter_launcher_icons:main
flutter run

หากคุณทำตามขั้นตอนเหล่านี้แล้ว คุณจะได้ผลลัพธ์เช่นนี้สำหรับทั้ง iOS และ Android บน iOS ไอคอนจะดูดี แต่บน Android มันไม่ใช่ คุณสังเกตเห็นสิ่งนั้นหรือไม่?

ปัญหาทั่วไปบน Android

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

1. ไอคอนอยู่ตรงกลางโดยมีช่องว่างภายใน

วิธีแก้ปัญหา: ใช้การออกแบบไอคอนแบบปรับได้พร้อมคุณสมบัติปลั๊กอิน flutter_launcher_icons ต่อไปนี้

มาแก้ไขไฟล์ pubspec.yaml และเพิ่มคุณสมบัติใหม่กัน ตอนนี้เราจะมี:

เมื่อทำเช่นนี้คุณจะได้ผลลัพธ์ด้านล่าง มันดูดีขึ้นมาก แต่ก็ยังมีปัญหาอยู่ — มันยืดออก

2. ไอคอน Adaptive กำลังยืดออก

มี "กระทู้ GitHub" ยาวๆ ที่พวกเขาพูดถึงเรื่องนี้

วิธีแก้ปัญหา #1: สร้างภาพที่มีข้อกำหนดต่อไปนี้ โลโก้นี้มีไว้สำหรับ Android เท่านั้น สำหรับ iOS เราจำเป็นต้องมีอีกอันที่เรากล่าวถึงในตอนต้นของบทความนี้

โซลูชัน #2: อีกวิธีหนึ่งคือการปรับขนาดรูปภาพตามนั้นโดยใช้ Android Studio

  • ไปที่ไฟล์ -> ใหม่ -> สินทรัพย์รูปภาพ

คุณจะเห็นสิ่งนี้ Android Studio จะโหลดไอคอนแบบปรับได้เริ่มต้น

ในส่วน Source Asset ให้ค้นหาโลโก้ของคุณ — ตำแหน่งของคุณ ในกรณีของฉัน มันอยู่ในโฟลเดอร์ download

คุณเพียงแค่ต้องทำให้เป็น ~60-70% ของขนาดดั้งเดิมสำหรับไอคอนที่ปรับเปลี่ยนได้ เมื่อทำเช่นนั้น คุณจะเห็นสิ่งนี้:

หากคุณปฏิบัติตามแนวทางแก้ไข คุณจะมีผลลัพธ์สำหรับทั้ง iOS และ Android ดังต่อไปนี้ ตอนนี้ทั้ง iOS และ Android ดูดีขึ้นแล้ว

2. คู่มือ (ไม่แนะนำ)

เมื่อก่อนผมเคยติดตามเรื่องนี้ มันเป็นความคิดที่ไม่ดีเนื่องจากฉันพลาดมากกว่าหนึ่งไอคอนในโปรเจ็กต์เนื่องจากความเร่งรีบและความคาดหวังของลูกค้า ฉันทำเรื่องยุ่งวุ่นวาย

นี่ไม่ใช่วิธีที่แนะนำในการเพิ่มไอคอนตัวเรียกใช้งาน สิ่งนี้เกี่ยวข้องกับการทำงานด้วยตนเอง ซึ่งหมายความว่าคุณต้องสร้างแต่ละไอคอนสำหรับแต่ละแพลตฟอร์มสำหรับความละเอียดหน้าจอแต่ละแบบ

การเพิ่มชื่อที่ถูกต้องและคัดลอกและวางลงในโฟลเดอร์ที่ถูกต้องเป็นงานที่น่ากังวล ใช้เวลานานและมีความเสี่ยงสูงอย่างไม่น่าเชื่อ

คุณสามารถทำได้ถ้าคุณต้องการ แต่ปัจจุบันมันไม่คุ้มค่า

ความคิดสุดท้าย

การเพิ่มไอคอน Launcher ให้กับแอพ Flutter ของคุณอาจดูเหมือนเป็นเรื่องง่าย และมันก็เป็น.

อย่างไรก็ตาม ดังที่คุณอาจทราบตลอดทั้งบทความนี้แล้ว คุณอาจประสบปัญหาบางประการที่คุณจะต้องแก้ไข

ขอแนะนำให้ใช้แพ็คเกจ flutter_launcher_icons เพื่อสร้างไอคอนสำหรับแต่ละแพลตฟอร์มโดยอัตโนมัติ นอกจากนี้ยังช่วยให้คุณใช้การออกแบบไอคอนแบบปรับเปลี่ยนได้สำหรับแอป Android

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

ฉันหวังว่าบทความนี้จะเป็นประโยชน์ เจอกันใหม่ชิ้นต่อไปครับ