การเปลี่ยนชื่อ App ชื่อ Package และไอคอน ใน Flutter

เขียนเมื่อ 2 ปีก่อน โดย Ninenik Narkdee
flutter icon flutter เปลี่ยนชื่อ app เปลี่ยน package name

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ flutter icon flutter เปลี่ยนชื่อ app เปลี่ยน package name



เนื้อหาตอนต่อไปนี้จะมาแนะนำวิธีการเปลี่ยนชื่อ app 
และ ไอคอนของ app รวมถึงกรณีที่ต้องการเปลี่ยน package
ของ app  ซึ่งจริงๆ แล้ว package ของ app ควรจะเป็นส่วน
ที่ต้องเลี่ยงในการแก้ไขหรือเปลี่ยนใหม่ เพราะถ้ามีการตั้งค่า
หรือใช้งานร่วมกับส่วนอื่นๆ อาจจะเป็นการยากที่จะแก้ไขชื่อ
package ดังนั้นจำไว้เสมอว่า ควรกำหนดชื่อ package ที่ต้อง
การให้ถูกต้องสำหรับโปรเจ็ค flutter ที่จะใช้งานจริงๆ
 

 

การเปลี่ยนชื่อ App

    รูปด้านล่างเป็นตัวอย่างข้อมูล app ที่เราทดสอบ โดยมีข้อมูลรูปไอคอน และชื่อ
ตามรายละเอียดดังรูป  เราต้องการเปลี่ยนเป็นชื่อใหม่ โดยจะเปลี่ยนเป็น 'demo app"
 
 


 
 
    สามารถเข้าไปแก้ไขชื่อได้ที่ไฟล์ AndroidManifest.xml
 
    android > app > src > main > AndroidManifest.xml
 

    ไฟล์ AndroidManifest.xml บางส่วน

 
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.flutter_app2">
    <uses-permission android:name="android.permission.INTERNET" />
   <application
        android:label="flutter_app2" 
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
........
.....
 
    เปลี่ยนส่วนของ android:label="flutter_app2" เดิมเป็น  android:label="demo app"
    จะเห็นว่าการเปลี่ยนชื่อ app ก็ง่ายๆ ไม่ยุ่งยาก 
 
    สังเกตว่าในไฟล์ในจะเห็นส่วนของการกำหนด icon ของ app ด้วย ก็คือ ส่วนของ
 
android:icon="@mipmap/ic_launcher"
 
     จะมีไฟล์รูปสำหรับไอคอนชื่อ ic_launcher.png (ในการกำหนดจะไม่แสดงนามสกุลไฟล์) อยู่ใน
โฟลเดอร์ 
 
    android > app > src > main > res > mipmap-xxx ที่ขนาดหน้าจอต่างๆ ดังรูป
 
 


 
 
    ประกอบด้วยขนาดรูปตามอัตราส่วน 
    1x (mdpi)      48x48      1*48
    1.5x (hdpi)    72x72      1.5*48  
    2x  (xhdpi)    96x96      2*48  
    3x (xxhdpi)   144x144   3*48
    4x (xxxhdpi)  192x192   4*48
 
 
    ดังนั้นวิธีที่เราจะเปลี่ยนรูปไอคอน เองก็เพียงแค่สร้างรูปไอคอนขนาดต่างๆ แล้วนำไปแทนที่รูปเดิม
ในแต่ละโฟลเดอร์  ซึ่งวิธีเราก็ได้รูปแบบไอคอน ความคมชัดและคุณภาพตามต้องการ แต่ถ้าไม่ต้องการ
เสียเวลา และได้ไอคอนในคุณภาพที่ใช้ได้ เราสามารถใช้ package ที่ชื่อ flutter_launcher_icons
มาช่วยจัดการได้ ดูวิธีการในหัวข้อถัดไป

 
 

เปลี่ยนไอคอน app ด้วย flutter_launcher_icons

    จะเป็นตัว package ที่จะทำให้เราสามารถสร้างรูปไอคอนขนาดต่างๆ จากรูปเพียงรูปเดียว แล้วนำไปแทน
ที่รูปไอตอนสำหรับหน้าจอต่างๆ ให้เราอัตโนมัติ ทำให้สะดวกในกรณีต้องการความรวดเร็ว  สิ่งแรกที่ต้องเตรียม
ก็คือรูปภาพสำหรับกำหนดเป็นไอคอน ควรใช้เป็น png ไฟล์ ถ้าใช้งานกับ ios ด้วยควรมีขนาดที่ 1024x1024
แต่ถ้าใช้งานเฉพาะ android อาจจะใช้ที่ขนาด 512x512 ไฟล์ 32-bit PNG  ค่า Color space รองรับ sRGB 
ขนาดไม่เกิน 1024KB 
     สมมติในที่เราได้รูปมาแล้ว ชื่อ icon.png ให้เรานำรูปที่จะใช้เป็นไอคอน เข้ามาไว้ในโปรเจ็ค flutter
ในตัวอย่างจะไว้ที่ assets > icon > icon.png ดังรูป
 
 


 
 

    ขั้นตอนต่อไปติดตั้ง flutter_launcher_icons มาใช้งาน

    เนื่องจาก flutter_launcher_icons เป็น package เสริมที่ไม่ได้ใช้ทำงานใน app ของเราดังนั้นเราจึง
กำหนดใน dev_dependencies แทน โดยเพิ่มไปในไฟล์ pubspec.yaml ดังนี้
 

    ไฟล์ pubspec.yaml บางส่วน

 
dev_dependencies:
  flutter_launcher_icons: "^0.9.2"

flutter_icons:
  android: "ic_launcher"
  ios: false
  image_path: "assets/icon/icon.png"
 
 



 
    ในที่นี้ เราจะใช้เฉพาะ android กำหนดชื่อไฟล์เป็น ic_launcher
     จากนั้นเรียกใช้คำสั่ง ผ่าน terminal ดังนี้
 
flutter pub run flutter_launcher_icons:main
 


 
 
    เมื่อทำคำสั่งสำเร็จเราก็จะได้ไอคอนสำหรับ app ใหม่เรียบร้อย ดูผลลัพธ์
 
 



 
 
 

การเปลี่ยนชื่อ Package

    ในที่นี้จะแนะนำตัวอย่างในส่วนของ android เท่านั้น อย่างไรก็ดี การเปลี่ยนชื่อ package ต้องให้มั่นใจ
ว่าไม่มีส่วนอื่นๆ ที่มีการใช้งาน package เดิม ตัวอย่างเช่น กรณีใช้งานกับ google service เรามีการกำหนด
ชื่อ package เพื่อเชื่อมการทำงานกับ firebase หากเปลี่ยนชื่อ package กรณีนี้ก็อาจจะทำให้ app ไม่สามารถ
ใช้งานได้ หรือ build ใหม่ไม่ผ่าน ดังนั้น แนวทางการเปลี่ยนชื่อ package นี้จะเป็นเพียงวิธีแก้ปัญหาเบื้องต้น
เท่านั้น 
    เราจะทำการเปลี่ยน package ใน vscode จะมีส่วนของไฟล์ที่จะต้องแก้ไขดังนี้
 
  •     android > app > build.gradle
  •     android > app > src > dubug > AndroidManifest.xml
  •     android > app > src > main > AndroidManifest.xml
  •     android > app > src > profile > AndroidManifest.xml
 
    ใช้วิธีการค้นหาด้วย Ctrl+F แล้วค้นหา เช่น com.example.flutter_app2 แล้วแทนที่ด้วยชื่อใหม่ 
เช่น com.example.demo
 
  •     android > app > src > main > kotin > com > example > flutter_app2 > MainActivity.kt
 
    ในส่วนนี้ต้องเปลี่ยนโครงสร้างโฟลเดอร์ให้สอดคล้องด้วย รวมแก้ไขในไฟล์ MainActivity.kt เป็น
 
  •     android > app > src > main > kotin > com > example > demo > MainActivity.kt
 
 
    หรือหากไม่ต้องการจัดการเอง สามารถใช้ package ที่ชื่อ change_app_package_name มาช่วย
จัดการก็สามารถทำได้เหมือนกัน แต่ในที่นี้จะไม่ลงรายละเอียด
 
 
    สำหรับเนื้อหานี้ก็จะประมาณนี้ เป็นแนวทางเตรียมความพร้อมสำหรับการ build app เพื่อไปใช้งาน


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 28-11-2021


การใช้งาน Adaptive icons

    เราลองเปรียบเทียบไอคอน ที่เราตั้งค่าการกำหนด จากวิธีด้านบน แล้วดูความแตกต่างดังรูป
 
 


 
 
    จะเห็นว่ารูปแบบไอคอนของเรา demo app จะคล้ายกับรูปแบบของ Contacts app  แต่รอบๆ
เราเห็นไอคอนของ app ต่างๆ ดูมีขนาดใหญ่ ชัดเจน และสวยสะดุดตา เช่น Chrome Maps และ 
Messages เป็นต้น ทั้งนี้ก็เพราะว่า app เหล่านั้นใช้รูปแบบไอคอนแบบ Adaptive icons ที่รองรับการ
ปรับเปลี่ยนขนาดไปตามรูปแบบการกำหนดของแต่ละผู้ผลิตมือถือและการใช้งาน UI เช่น รองรับ Mask
ในรูปแบบวงกลม รูปแบบสี่เหลี่ยมหรือแม้แต่รูปแบบต่างๆ ในตัวอย่าง ui ในรูปก็รองรับ Mask หรือการ
ครอบทับด้วยเลเยอร์รูปวงกลม
    ถ้าเราอยากได้รูปแบบไอคอนแบบ Adaptive icons ก็สามารถใช้งาน flutter_launcher_icons
โดยสามารถตั้งค่าได้ดังนี้
 
    ไฟล์ pubspec.yaml บางส่วน
 
dev_dependencies:
  flutter_launcher_icons: "^0.9.2"

flutter_icons:
  android: true
  ios: false
  image_path: "assets/icon/icon.png"
  adaptive_icon_background: "#FFC0CB"
  adaptive_icon_foreground: "assets/icon/adaptive_icon.png"
 
    เราเสริมในส่วนของการตั้งค่า adaptive_icon เข้ามา โดยเพิ่มส่วนของสีพื้นหลัง กับส่วนของรูปภาพ
สำหรับใช้เป็น  adaptive_icon ค่า adaptive_icon_background และ adaptive_icon_foreground
ตามลำดับ ตามวิธีกำหนดด้านบน
    การจัดเตรียมรูปไอคอนให้รองรับสามารถทำได้ดังนี้
    ให้ไอคอนมีขนาดที่ 432x432 
    พื่นที่สี่เหลี่ยมรองรับเลเยอร์ mask แบบสี่เหลี่ยมให้มีขนาด 288x288
    พื้นที่วงกลมให้รองรับเลเยอร์ mask แบบวงกลมให้มีขนาด 264x264
    จากนั้นพยายามจัดส่วนของรายละเอียดไอคอนไว้ในวงกลม เหมือนตัวอย่างด้านล่าง
 
 


 
 
    เราสามารถกำหนดรายละเอียดต่างๆ เข้าไปได้ ไม่ว่าจะเป็นส่วนโปร่งใสรอบๆ ก็ใส่เป็นสีได้ หรือส่วน
ในกรอบสี่เหลี่ยมก็ใส่ข้อมูลใดๆ ก็ได้ แต่รายละเอียดของไอคอน ควรอยู่ในพื้นที่วงกลม ถ้านำรูปไอคอน
นี้ไปใช้ หากเป็นเครื่องที่ใช้เลเยอร์ mask เป็นสี่เหลี่ยม ไอคอนของเราก็จะเห็นขอบสีขาวรอบวงกลม
แต่ถ้าเครื่องใช้เลเยอร์ mask เป้นวงกลม เราก็จะเห็นเฉพาะส่วนวงกลมสีแดง ในที่นี้ เราต้องการให้ app
มีไอคอนเป็นรูปวงกลม 
 
     เมื่อกำหนดตั้งค่าใหม่เรียบร้อยแล้ว ก็รันคำสั่งใหม่ อีกครั้ง
 
flutter pub run flutter_launcher_icons:main
 
    เปรียบเทียบผลลัพธ์ใหม่ที่ได้
 
   

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


   เพิ่มเติมเนื้อหา ครั้งที่ 2 วันที่ 06-12-2021


แก้ปัญหากรณ๊ error เมื่อทำคำสั่ง generate icon 

 
ให้เช็คในไฟล์ build.gradle
    
    android > app > build.gradle
 
    ดูส่วนของ
 
 
    defaultConfig {
..
....
        applicationId "com.example.start_app"
        minSdkVersion 19
        targetSdkVersion 30
.....
..
    }


 
 
    ใส่เวอร์ชั่นต่ำสุด และเวอร์ชั่นของ sdk ที่จะ build ปกติจะเป็นตัวล่าสุด


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ









เนื้อหาที่เกี่ยวข้อง



Tags:: เปลี่ยนชื่อ app flutter เปลี่ยน package name flutter icon







URL สำหรับอ้างอิง












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Privacy Policy
Author
2023 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ