How to Create Dynamic Island and ActivityKit with Flutter

This tutorial will show you how to set up Dynamic Island in iOS. I’m on Xcode 14.1 Beta 2, but you can use this as a guideline for Native and Flutter. I will update this article again when Xcode 14.1 comes out or when Apple makes a change from Beta.

Let’s Start by creating a widget kit first. Go to File > Target

Choose iOS Platform and search for Widget Extension.

Insert the product name. You don’t need to check the “Include Configuration” box since it plays no part in this tutorial, but I have it checked anyway.

After you finish all steps, you will get a widget folder along with the main folder in Xcode.

Now let’s run it. Yes! We have a widget UI on our main page now. Simply touch and hold the widget kit on the main screen, then click + to add your app as a widget.

I discuss Widget Kit here because we can use it with ActivityKit together. However, I won’t go in too deep since our focus in this tutorial is on Dynamic Island.

The top part is just about the Widget Kit, so where’s the Live Activity on Dynamic Island? Let’s start working on the ActivityKit shall we?

First, go to info.plist and add a new key, “NSSupportsLiveActivities” and set it to true.

Add PizzaDeliveryAttributes.swift file, then implement the ActivityAttributesprotocol like so.

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 the Target of this file into the main project and widget extension. You can see this on the right side of Xcode.

Create a new layout for Dynamic Island. I’m using the one from the Apple developer website.

If you have an existing Widget Kit, you must move @main from Widget Kit to a new class so that we can use both current widgets with ActivityKit.

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

Most of my tutorial comes from Apple Documentation. That said, Apple doesn’t provide any sample code, so I created one for myself to use in my project when it’s released. You can read the Apple Documents for more in-depth details.

Apple Developer Documentation

The above is for the Native. For Flutter developers, you will need to implement a little bit more on the Dart side to send the request to Native.

For a quick play, you can pull this repo and play with it.

GitHub - theamorn/flutter-dynamicisland

Below is a video of my repo.

And that’s it! Now you may enjoy LiveActivity and Dynamic Island 😏

Want to read more stories like this? Or catch up with the latest trends in the technology world? Be sure to check out our website for more at www.kbtg.tech