Smartwatch Development with Flutter

 It is indisputable that the smartwatch market has been growing for many years. It doesn't matter whether we are talking about Android with its WearOS operating system or Apple with WatchOS. There are more and more apps designed specifically to integrate with watches and there is one niche in particular that is revolutionising the smartwatch market: health and fitness. 

That's why I would like to share with you how easy or difficult it is to create an app for smartwatches with Flutter technology and show you its limitations.

Standalone App vs Companion App

When we talk about an application for a smartwatch, the first thing to differentiate is that a companion application is not the same as a standalone application. 

While the companion application serves to extend the capabilities of a mobile application. That is, it depends on a connection or link to the application in which to communicate. For example, let's think of a mobile media player application. A companion app could offer you, from your smartwatch, to control the player by allowing you to turn the volume up and down with the watch crown, pause or stop playback etc...

A standalone application, on the other hand, is completely autonomous and independent. That's where the difference lies.

Flutter application for WearOS

Preparing a Flutter project to run on WearOS is fairly straightforward. Mainly the simulators will be available in the environment of your choice and the destination to run the application as well. 

We can make our application start up easily, the difficulty will be when working with the different layouts available. That is to say...

One problem in the development of smartwatch applications on WearOS lies in circular layouts. It should first be clarified that this is not related to Flutter, but rather to the fact that the diversity of layouts, especially with circular layouts, makes it difficult to compose screens.

What is going on there? It turns out that although you see a round screen, the layout is square. This means that the position of the elements when aligned horizontally will be on the square and not on the round visible part.

Detecting the layout type in WearOS

One way we have to detect the layout type in WearOS is through the wear dependency developed by the Flutter community.

There currently three widgets provided by the plugin:

WatchShape: determines whether the watch is square or round.

AmbientMode: builder that provides what mode the watch is in. The widget will rebuild whenever the watch changes mode.

This plugin also allows us to detect or hear changes when we raise and lower the digital crown.

Flutter application for WatchOS

It gets more complicated in the case of Apple's smartwatches. While there are no problems with the layouts, at the time of writing this post there are only 2 types of layouts available. The problem lies in the fact that our default Flutter application is not going to have the Apple smartwatch as a destination. This is because by default it is not an allowed destination, neither the smartwatch nor the Apple TV. But this is the subject of a future post.

It should be made clear that the only thing we can do with the smartwatch is a companion application. And to run it, we will need to adapt our native iOS project. Creating a new target, adding some Swift code for the communication, modifying the Info.plist, etc... As Michael Hiztker showed at Flutter Viking in 2022.

Conclusions

As you can see, smartwatch application development has its own challenges in native with layouts. Bringing Flutter to WatchOS is a configuration challenge that is a technical challenge that can serve as a barrier to entry. Hopefully in the 2024 roadmap it has already been mentioned that they are going to improve support for Apple devices. Looking forward to seeing what the Flutter team has in store for us. Best regards!