การกำหนด Splash screen ให้กับ app ใน Flutter

Splash screen หรือที่รู้จักใช้ชื่อ Launch screens เป็น

ส่วนที่ทำงานเริ่มต้นในขณะที่ app กำลังโหลดข้อมูลและ

ตั้งค่าเบื้องต้นต่างๆ ในที่นี้จะพูดถึงเฉพาะส่วนของ android

 

 

    ก่อนหน้านี้ใน flutter จะมีส่วนของการควบคุมหน้า screen ก่อนเริ่ม app ในสองส่วนคือ

launch screen แสดงในขณะที่ระบบ android ของ app กำลังเตรียมพร้อมทำงาน แล้วตามด้วย

หน้า splash screen ในขณะที่ flutter กำลังจะเตรียมพร้อมทำงาน ตามลำดับ

    ใน Flutter 2.5 เป็นต้นไป ทั้งสองส่วนนี้จะถูกรวมเป็นส่วนเดียวกัน และจะยกเลิกการ

กำหนดใช้งาน io.flutter.embedding.android.SplashScreenDrawable ในไฟล์ AndroidManifest.xml

 

    android > app > src > main > AndroidManifest.xml

 

ถ้ายังมีการกำหนดการใช้งาน ด้านล่างอยู่ เมื่อทำการ build ก็จะมีการแจ้งเตือนให้ทำการลบหรือยกเลิก

การใช้งานไป

 

<meta-data
              android:name="io.flutter.embedding.android.SplashScreenDrawable"
              android:resource="@drawable/launch_background"
              />

 

    ให้เราทำการลบส่วนนี้ในไฟล์ AndroidManifest.xml ออกไปได้เลย

 

    ในโปรเจ็คเริ่มต้นของ Flutter จะกำหนดการใช้งาน  launch theme ในไฟล์ AndroidManifest.xml ดังนี้

    

 

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:label="Demo App"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:exported="true"
........
.....

 

    เป็นการกำหนดไฟล์ styles.xml และใช้งานส่วนของ style ที่ชื่อ LaunchTheme 

 

    android > app > src > main > res > values > styles.xml

 

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.
         
         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

 

    ใน android app จะมีช่วงเวลาหนึ่งก่อนระบบจะเริ่มทำงาน จะมีการเตรียมระบบและกระบวนการทำงาน

ของ app ในขณะเกิดการทำงานนั้นขึ้น android มีการใช้งาน launch screen เพื่อใช้แสดงรูปภาพ ในขณะ

ที่กำลังรอ ในไฟล์ style ข้างต้น ส่วนแรกจะเป็นการกำหนดสำหรับ splash screen หรือ launch screen

ในชื่อ LaunchTheme

 

<style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
    <item name="android:windowBackground">@drawable/launch_background</item>
<!-- <item name="android:windowFullscreen">false</item>-->
</style>

 

    นอกจากนั้น ยังมีการกำหนด NormalTheme สำหรับใช้งานหลังจากที่ launch screen แสดงเสร็จก็จะแสดง

พื้นหลังของธีมตามค่าที่กำหนดในช่วงไม่กี่วินาทีก่อนเข้าสู่ app ค่าตามรูปแบบด้านล่างใช้ค่าสีพื้นหลังของระบบ

android เราสามารถปรับเปลี่ยนเป็นค่าอื่นได้ ในที่นี้เราไม่ได้สนใจส่วนนี้ เพราะเป็นส่วนที่แสดงสั้นๆ แทบจะไม่ทัน

สังเกต

 

<style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
    <item name="android:windowBackground">?android:colorBackground</item>
</style>

 

    ในการใช้งาน Launch screen เราสนใจส่วนของการกำหนด ใน style ที่ชื่อ LaunchTheme  จะเห็นว่ามีการ

กำหนดการใช้งานไว้ในไฟล์ชื่อ launch_background.xml ในโฟลเดอร์ drawable

 

    android > app > src > main > res > drawable > launch_background.xml

 

 

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />

    <!-- You can insert your own image assets here -->
    <!-- <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/launch_image" />
    </item> -->
</layer-list>

 

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

 

<item android:drawable="@android:color/white" />

 

    การกำหนดชื่อสีไปตรงๆ โดยเปลี่ยนเป็นค่าที่ต้องการเลย จะไม่ได้สามารถทำได้ แต่เนื่องจาก

สีขาวเป็นค่าของระบบที่สามารถเรียกใช้งานได้  สมมติเราต้องการกำหนด splash screen เป็นพื้นหลัง

สีแดงและมีไอคอนของ app อยู่ตรงกลาง ก็สามารถทำได้ดังนี้ ขั้นแรกให้เราสร้างไฟล์สำหรับกำหนด

ค่าสีที่จะใช้ใน

 

    android > app > src > main > res > values > colors.xml

 

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="ic_launcher_background">#FFC0CB</color>
    <color name="red">#FF0000</color>
</resources>

 

    เวลาใช้งานก็กำหนดในลักษณะนี้ ในไฟล์ launch_background.xml

 

<item android:drawable="@color/red" />

 

    เมื่อเราได้ส่วนของสีพื้นหลังแล้ว ต่อไปก็กำหนดส่วนของรูป splash screen เราจะใช้รูปจากไอคอน

ในโฟลเดอร์ drawable-xxx ที่รองรับขนาดต่างๆ ในที่นี้จะเป็นแนวทางก่อน ก็จะได้เป้น

 

<item>
    <bitmap android:gravity="center" android:src="@drawable/ic_launcher_foreground" />
</item>

 

    เป็นการแสดงรูปตรงกลาง โดยใช้รูปจากไฟล์ ic_launcher_foreground ในโฟลเดอร์ drawable-xxx ที่รองรับขนาดต่างๆ

ดังนั้นเราก็จะได้ไฟล์ launch_background.xml ในโฟลเดอร์ drawable และ drawable-v21 เป็นดังนี้

 

 

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/red" />
    <item>
        <bitmap android:gravity="center" android:src="@drawable/ic_launcher_foreground" />
    </item>
</layer-list>

 

    ค่า android:gravity สามารถกำหนดค่าเหล่านี้ได้ 

    bottom, center, center_horizontal, center_vertical, clip_horizontal, 

    clip_vertical, end, fill, fill_horizontal, fill_vertical, left, right, start, หรือ top.

 

     สมมติเช่น เราต้องการให้ใช้พื้นหลังเป็นรูปเล็กเรียงกันเต็มพื้นที่ แล้วซ้อนด้วยรูป splash ตรงกลาง

ก็จะกำหนดในลักษณะนี้ ถ้ารูปเราอยู่ในโฟลเดอร์ drawable-xxx ที่ขนาดต่างๆ 

 

    <item>
        <bitmap android:gravity="fill" android:src="@drawable/background_splash" />
    </item>
    <item>
        <bitmap android:gravity="center" android:src="@drawable/splash" />
    </item>

 

    ตอนนี้เราได้แนวทางการกำหนด splash screen เองแล้ว ก็สามารถหาข้อมูลเพิ่มเติม แล้วประยุกต์

ปรับแต่งได้ตามต้องการ อย่างไรก็ตาม เราสามารถลดขั้นตอนให้สะดวกและรวดเร็วขึ้น โดยใช้ package

ที่ชื่อว่า flutter_native_splash 

 

 

    จะเป็น package ที่ทำให้เราสามารถสร้าง splash screen มาใช้งานได้ง่ายๆ เพียงแค่เตรียมรูปที่ต้องการ

จากนั้นตั้งค่า และรันคำสั่ง ตัว package ก็จะทำการจัดเตรียมและกำหนดค่าต่างๆ ให้เราอัตโนมัติ

 

    เนื่องจาก flutter_native_splash เป็น package เสริมที่ไม่ได้ใช้ทำงานใน app ของเราดังนั้นเราจึง

กำหนดใน dev_dependencies แทน โดยเพิ่มไปในไฟล์ pubspec.yaml ดังนี้

 

 

dev_dependencies:
  flutter_native_splash: ^2.4.1

flutter_native_splash:
  color: "#FF0000"
  image: "assets/splash.png"
  android_12:
    image: "assets/splash.png"
    color: "#FF0000"  
  ios: false 
  web: false 

 

    ข้างต้นเป็นการติดตั้ง flutter_native_splash และตั้งค่าการทำงานที่ต้องการเบื้องต้น คือ จะใช้สีพื้นหลังเป็น

สีแดง และใช้รูปจากโฟลเดอร์ assets > splash.png และใช้เฉพาะ android  จึงปิดส่วนของ ios และก็ web

ออกไป สำหรับไฟล์ splash.png เราควรให้มีความคมชัดและขนาดใหญ่ อย่างน้อยควรเป็น 512x512 และเราต้อง
กำหนดสำหรับส่วนของ android 12 ขึ้นไปด้วย ซึ่งสำหรับรูปที่จะใช้มีรูปแบบที่ควรปรับดังนี้

ถ้าเป็นรูปไอคอนโปร่งใส ที่มีกำหนดสีพื้นหลัง ควรใช้รูปขนาด 960x960 pixels และ ให้ไอคอนอยู่ในวงกลมที่
มีเส้นผ่านศูนย์กลางขนาด 640 pixels
แต่ถ้าเป็นไอคอนที่ไม่ได้กำหนดสีพื้นหลัง ควรใช้รูปขนาด 1152x1152 pixels และให้ไอคอนอยู่ในวงกลมที่มี
เส้นผ่านศูนย์กลางขนาด 768 pixels