วิธีทำ Dynamic Island และ ActivityKit ด้วย Flutter

บทความนี้ว่าด้วยวิธีการทำ Dynamic Island ของ iOS 16 ครับ โดยผมใช้ Xcode 14.1 Beta 2 ที่กำลังอยู่ในการพัฒนา ในขณะที่ตัวจริงจะออกพร้อมกับ iOS 16.1 แต่ถ้าตัวจริงกับตัว Beta มีอะไรเปลี่ยนใหม่ระหว่างนั้น ผมจะมาอัพเดตเนื้อหาในบทความให้อีกทีนะครับ

มาเริ่มจากการสร้าง Widget กันก่อนเลยครับ ไปที่ Xcode > File > Target

เลือก iOS Platform และหาคำว่า Widget Extension

เติม Product Name ที่ต้องการ ไม่จำเป็นต้องติ๊กที่ Include Configuration Intent นะครับ แต่ถ้าจะติ๊กก็ได้เช่นกัน

หลังจากทำเสร็จหมดแล้ว จะมีโฟลเดอร์ Widget ขึ้นมาใหม่ในตัว Xcode ซึ่งจะอยู่คู่กับ Main Project ของเราเลยครับ

เสร็จแล้วเราลองรันกันได้เลย ก็จะได้ Widget UI ขึ้นมาในหน้า Home Screen เราแล้ว เพิ่มด้วยการกดค้างที่จอตอนอยู่ Home Screen แล้วกด + ด้านซ้ายบนของจอ จากนั้นเลือกแอปของเรา ก็จะมาเป็นแบบนี้เลยครับ

บทความนี้ผมจะไม่กล่าวถึงรายละเอียดเกี่ยวกับ Widget นะครับ เพราะเราจะโฟกัสที่ Dynamic Island อย่างเดียว แต่ที่ต้องอ้างอิงเพราะมันจำเป็นจะต้องมี Widget ก่อน ถึงจะมาทำ Dynamic Island กับ ActivityKit ได้ ซึ่งด้านบนจะว่าด้วย Widget Kit อย่างเดียว ทีนี้เรามาทำ ActivityKit กันครับ

ขั้นแรก เราจะต้องไปเพิ่ม Key `NSSupportsLiveActivities` ที่ info.plist และให้ค่าเป็น Yes

ให้สร้าง File ใหม่ชื่อว่า PizzaDeliveryAttributes.swift หรือจะแก้ชื่อเป็นอย่างอื่นก็ได้นะครับ เอาตาม Model ที่ต้องการ แล้วให้ Implement ActivityAttributesProtocol ตามด้านล่าง

import ActivityKit
import Foundation
struct PizzaDeliveryAttributes: ActivityAttributes {
   public typealias PizzaDeliveryStatus = ContentState
   public struct ContentState: Codable, Hashable {
      var driverName: String
      var deliveryTimer: ClosedRange<Date>
   }
   var numberOfPizzas: Int
   var totalAmount: String
   var orderNumber: String
}

และให้ไปติ๊ก Add Target ของไฟล์ที่เพิ่งสร้างขึ้นมาใหม่ที่ด้านขวาของ Xcode ตามนี้ครับ

ขั้นตอนต่อไปเราจะสร้าง Layout ของ Dynamic Island กัน ซึ่งตัวอย่างด้านล่างผมได้มาจากเว็บ Apple Developer ครับ สำหรับรายละเอียด ExpandedRegion ต่างๆ สามารถอ่านที่เว็บ Apple ได้เลยนะครับ ส่วนนั้นจะอธิบายละเอียดกว่า

ในกรณีที่มี Widget Kit อยู่แล้ว สามารถย้าย Widget Kit มารวมกันที่ WidgetBundle ได้เลยครับ แล้วย้าย @main จาก Widget Kit มาไว้ที่นี่ได้เลย

import SwiftUI
@main
struct PizzaDeliveryWidgets: WidgetBundle {
   var body: some Widget {
      widget()
      PizzaDeliveryActivityWidget()
   }
}

ซึ่งรายละเอียดจะอยู่ในเว็บไชต์ด้านล่างนี้ครับ แต่เนื่องจาก Apple ไม่มี Sample Code ให้ มีแค่วิธีทำอย่างเดียว ผมจึงนำมาทำ Sample Code เอง เผื่อเก็บไว้ใช้ตอนที่ออกมาให้ใช้งานจริงแล้ว

Apple Developer Documentation

วิธีที่กล่าวมาข้างต้นเป็นวิธีบน SwiftUI ทั้งหมดครับ สำหรับฝั่ง Flutter เราก็แค่เพิ่มการเชื่อมต่อจาก Flutter มาที่ SwiftUI อีกนิดเดียวเท่านั้นเอง ตามตัวอย่าง Repo ด้านล่างเลย

GitHub — theamorn/flutter-dynamicisland

ด้านล่างเป็นวิดีโอตัวอย่างที่รันจาก Repo นี้นะครับ

มาเตรียมพร้อมกับตัวจริง LiveActivity และ Dynamic Island ภายในปลายปีนี้กันครับ 😏

สำหรับชาวเทคคนไหนที่สนใจเรื่องราวดีๆแบบนี้ หรืออยากเรียนรู้เกี่ยวกับ Product ใหม่ๆ ของ KBTG สามารถติดตามรายละเอียดกันได้ที่เว็บไซต์ www.kbtg.tech