Flutter Tut - P1: TẠO WIDGET TRÊN MÀN HÌNH LOCK SCREEN CỦA DÒNG IPHONE 14 (iOS 16)

Chắc hẳn gần đây mọi người ai cũng rần rần vụ Apple ra mắt dòng sản phẩm mới Iphone 14 pro, Iphone 14 pro max với iOS 16. Đu trend cùng mọi người, mình cũng tạo ra vài demo nho nhỏ trên dòng sản phẩm này nhé! Demo đầu tiên là widget trên màn hình lock screen. Với những dòng iphone trước đó, chúng ta quen với tạo một widget trên màn hình home, nhưng với dòng sản phẩm mới này, Apple đã thêm widget trên cả màn hình lock. Điều này cho phép người dùng dễ dàng truy cập vào ứng dụng một cách nhanh chóng khi con iphone của mình đang ở chế độ lock màn hình. Đầu tiên để tạo được tính năng này, chúng ta phải sử dụng xcode 14 và ios 16 nha!

Trước hết mình tạo một project với tên là LockScreenWidgetDemo (việc này đơn giản chắc mọi người đều biết nên mình không nói kỹ phần này nhá)
Tiếp đến chúng ta tạo một widget bằng cách vào xcode/files/new/target/widget extension:

Sau khi tạo xong widget, nó sẽ hiện ra một popup và chúng ta kích vào Active nhé:

Widget này được tạo mặc định với SwiftUI luôn nhá mọi người. Khi mình tạo xong một widget thì nó sẽ có hình thù mặc định thế này nè:

Nhưng chúng ta để ý là nó đang mặc định hiển thị widget trên màn hình home thôi nhá. Nếu mình muốn tạo widget trên màn hình lock (lock screen) thì mình phải thêm chút dòng code này vào chổ config nhá: (nó có support nhiều loại nữa, nhưng mình chỉ ví dụ loại widget hình tròn thôi nè): .supportedFamilies([.accessoryCircular]) Đoạn code config sẽ trở thành thế này:

@main struct LockScreenWidget: Widget { let kind: String = “LockScreenWidget” var body: some WidgetConfiguration { IntentConfiguration(kind: kind, intent: ConfigurationIntent.self, provider: Provider()) { entry in LockScreenWidgetEntryView(entry: entry) } .configurationDisplayName(“My Widget”) .description(“This is an example widget.”) .supportedFamilies([.accessoryCircular]) } }

Xong rồi, giờ chúng ta build trên simulator 14 Pro, ios 16 nào. Nó đã hiện ra khi chúng ta lock màn hình rồi nè

Tiếp theo mình thay đổi diện nào tuỳ theo ý tưởng của mình nè. Để thay đổi cái này mình để ý phần view của nó nhé. Ở đây mình cho nó một hình trái tim:

struct LockScreenWidgetEntryView : View { var entry: Provider.Entry var body: some View { ZStack{ Color.gray Image(systemName: “heart.fill”) } } }