Supercharge Your Flutter Apps With Apple Watch Integration

In 2023, the Apple Watch had an impressive 31% market share. This handy wearable device lets you measure your fitness, track meaningful health insights, connect with companion apps, make calls, and more right from your wrist.

With all that power, creating companion Apple Watch apps for your iOS apps can help enhance the overall user experience and make great use of this feature-packed device.

Let’s look at how the Apple Watch can help you bring new functionality to your apps and how to build an Apple Watch app that communicates with an existing Flutter app. 

How can Apple Watch apps improve user experience?

Creating synchronous and asynchronous communication between wearable devices and apps is a great way to add a new layer of functionality — and we’re no stranger to the task thanks to our work with Thaw. 

Here are just a few of the ways this approach helps improve the user experience:

• Enhanced convenience: Users can access information and perform quick actions on their watch that carry over to the iOS app when they go back to their phone.
• Seamless integration: Data and settings stay consistent across both devices.
• Real-time feedback: Enables real-time alerts, progress updates, or notifications between devices based on interactions with either app.
• Increased engagement: Apple Watch’s great features like fitness tracking and glanceable notifications can make the entire app experience more engaging and valuable.
• Improved accessibility: A more accessible user experience overall for users with disabilities, those who find using smartphones challenging, or in instances where using a phone is impractical.

These are just a few great advantages this approach enables, in addition to all the exciting benefits of Flutter app development. 

Step-by-step: Integrating your Flutter app with Apple Watch 

With all those advantages in mind, let’s look at how to get the two types of apps to talk to one another. 

Although Flutter provides a way to directly build iOS apps, adding an Apple Watch app to a project can be tricky. Though the Apple Watch exists within the same Apple ecosystem, it runs WatchOS, which is a separate operating system from iOS.

So, if we want to build an Apple Watch app that communicates with a Flutter app we need to follow a few steps and meet some specific requirements:

1. Implement the Apple Watch extension app with SwiftUI  
2. Setup the communication between the watchOS and iOS
3. Create an interface to allow communication between Flutter and the iOS

Let’s now explore how we’ll implement these three requirements.

Adding an Apple Watch extension to your Flutter app

First, open your iOS folder from a Flutter project with Xcode, create a new target (File -> New -> Target), and select a watchOS “App”.

Then, fill in the “Product Name” field and select the “Watch App for Existing iOS App” option.

After you click on “Finish”, you’ll see a new folder like the example below:

Developing your watchOS app

Now that we have added the watchOS app to our project, we can develop the interfaces and some logic using SwiftUI. For this article, we’ll create an app that allows the user to increase or decrease a counter.

This is the result:

Setting up communication between the watchOS and iOS

To create a communication channel between the watchOS and the iOS, we need to use the WCSession from the WatchConnectivity library. According to Apple’s WCSession documentation, “Your iOS app and watchOS app must both create and configure an instance of this class at some point during their execution. When both session objects are active, the two processes can communicate immediately by sending messages back and forth.” 

Let’s see how that works in our example.

First, at “Runner/AppDelegate.swift” add the following code to start the session and create an extension that implements the WCSessionDelegate protocol. This will listen when the watchOS sends a message to the iOS app.

You also have to start the session from the watchOS extension. For this example, we’ll start it from our view model as the following:

Now we can send and receive data from our iOS app to our watchOS app extension. But we still need to communicate with our Flutter code. Here’s how to make that happen.

Pigeon: A better way to work with Platform Channels

Usually, when we want to develop an integration between Flutter and the native code we use MethodChannels. But, this method can take a lot of extra effort to set up all that communication between platforms. Instead, we’ve found that Pigeon is a great option.

What is Pigeon?

Pigeon is a code generator tool that makes it easy to facilitate communication between Dart (the programming language used by Flutter) and other platforms like Kotlin, Swift, and Objective-C. 

It’s especially useful for Flutter developers who need to interact with native code or libraries that are not directly accessible from Dart. Pigeon makes communication between Flutter and the host platform type-safe, easier, and faster and removes the need to manage strings across multiple platforms and languages.

According to Pigeon’s documentation, it also “improves efficiency over common method channel patterns” and “removes the need to write custom platform channel code, since Pigeon generates it for you.”

It’s a great tool, and perfect for our example.

Generating code with Pigeon

After adding Pigeon as a development dependency to your Flutter project, create a dart file in the root folder (out of the lib folder). Then, let’s define the interfaces to generate the code through Pigeon.

Run the “flutter pub run pigeon –input path/to/watch_interface.dart” to generate the files.

After running the above command, two files will be generated: 

For Swift we’ll have:

• A protocol “WatchCounterHostAPI” that we’ll implement to receive messages from Flutter.
• A class “WatchCounterHostAPISetup” to start the communication and provide the implementation of “WatchCounterHostAPI”.
• A class “WatchCounterFlutterAPI” to send messages to Flutter.

For Flutter we’ll have:

• A class “WatchCounterHostAPI” to send messages to iOS.
• An abstract class “WatchCounterFlutterAPI” will be implemented to receive messages from iOS.

That is how the implementation of those APIs will look like:

Now we can send messages from the watchOS session, receive them in the iOS app, and send them to our Flutter code.

Seamless communication between Apple Watch and Flutter apps

After those simple steps, you can see our finished product: a Flutter + Apple Watch application, that dependably communicates and executes our Dart code to provide data to watchOS  — all made possible by using Pigeon. 

As you interact with either app, the other updates give you seamless communication and integration.

Want to play around with this example yourself? Check out the code here.

Learn more about developing for Apple devices

At Cheesecake Labs, we’re always keeping a close eye on Apple’s hardware releases and looking for ways to create unique and useful app experiences across the Apple ecosystem.

To learn more about our approach to developing Apple products (like the company’s other wearable, Vision Pro) head to the Cheesecake Labs blog.