Flutter: Building Wear OS app

Introduction

This article will help you to build a Flutter Wear OS (Android Wear) app from scratch.

I was working on Wear OS apps using Flutter for the past few days, as inspiration from Matt Sullivan article “Experimenting with Flutter on Wear OS”. The plugin, “wear”, created by Matt helped me a lot in managing the screen size of the watch across different screens.

In this app, I have tried to optimize the “Relax” app created by Erin Morrissey (made as a Flutter Create Submission 2019, which got nominated for Visual Beauty), to run on Wear OS devices.

Some screenshots of the final app are given below:

Screenshots:

Different app screens on Wear OS

App In Action:

FlutterOS

Setup

To build a Wear OS app, we also have to do a lot to modifications as well as additions to the android part of the Flutter app, which is really a very tedious process, so bear with me.

Matt has already discussed, in his GitHub project of flutter_wear_plugin, how to set up the project for Flutter Wear OS apps. But, I faced a lot of difficulties while following the steps. So, I recommend that you clone my project or Matt’s example project and then work on it, after deleting the UI files which you don’t require, because in this way you do not need to set up the whole project which consumes a huge amount of time and you will face a lot of challenges.

I am again stating the setup process below (not recommended):

App Gradle File

Change the min SDK version to API 23:

minSdkVersion 23

App Gradle File

Then, add the following dependencies to the Android Gradle file for the app:

dependencies {
    // Wear libraries
    implementation 'com.android.support:wear:27.1.1'
    implementation 'com.google.android.support:wearable:2.3.0'
    compileOnly 'com.google.android.wearable:wearable:2.3.0'
}

App Gradle File

Manifest File

Add the following to your AndroidManifest.xml file:

AndroidManifest.xml

Update Android’s MainActivity

The ambient mode widget needs some initialization in Android’s MainActivity code. Update your code as follows:

Android’s MainActivity

So, after the setup is complete let’s dive into the best part that is coding.

Implementation

Before diving into the real coding part, let’s see what are the plugins required and also import the assets required in this project.

Plugins:

The plugins used for this project are:

1. wear (for using the Wear OS optimized widgets)
2. audioplayers (to use audio playback in the app)

Assets:

The images, icons, audio files, as well as the system material icons, are included in the assets folder, which you can download by going to the Google Drive link below:

assets - Google Drive

I will tell you in a minute why I have included the system material icons in the assets folder by downloading them from the Material Design Website, although as you might know all of the material design icons are integrated with Flutter for direct use.

Don’t forget to import these in your “pubspec.yaml” file.

Coding Part

main.dart

First of all, import the packages that are required in the “main.dart” file.

The wear plugin gives three types of widgets:

• WatchShape: determines whether the watch is square or round.
• InheritedShape: an InheritedWidget that can be used to pass the shape of the watch down the widget tree.
• AmbientMode: builder that provides what mode the watch is in. The widget will rebuild whenever the watch changes mode.

We will require all these widgets in the “main.dart” file.

The Wear OS has two modes:

1. Normal Mode
2. Ambient Mode

So, when the Wear OS is in the normal mode we will show the real content of the app and when it is in the ambient mode we will show a screen with a dark background, which will help to save battery.

After adding all these, our “main.dart” file will look like this:

ambient_screen.dart

Next, we will design the UI of the ambient screen of the watch.

The final Ambient screen will look like this:

Ambient Screen

As you can tell from the screenshot that we have to add a Scaffold (set the background color to black) with a Column containing two widgets:

1. Text widget (set text color to blue)
2. FlutterLogo widget

So, the completed ambient screen code will look like this:

start_screen.dart

In this file, we have to determine the screen size of the watch so that all the components properly fit within the screen. To determine the size and shape of the watch face we have to use the “WatchShape” widget which we get from the wear plugin.

We can determine the screen height and screen width by following this:

Now, we can build the UI using the screen size which will look like this:

Start Screen

It again contains a Column with two widgets:

1. FlutterLogo
2. RaisedButton (Inside which we have to define a route, which will take us to the next screen, i.e., “name_screen.dart”)

I had to wrap the Column widget with a Container and specified its height and width so that the contents of the column fits perfectly onto the screen.

The code for the start_screen is given below:

In the above code snippet, you can see that I have used a method “boxInsetLength” (in line number 17 &18). Actually, it is defined inside the “utils.dart” file, that’s why we had to import “utils.dart” (in line number 3). This method measures the screen size when the watch face is round by taking the radius as the input.

name_screen.dart

We have passed the screen height and screen width to the “name_screen.dart” file, so that we do not need to calculate the screen size again.

The final “name_screen.dart” file looks like this:

Name Screen

I don’t have to elaborate on anything in this file. The code for building this UI is given below:

One thing that I want you to notice is that in line number 39 I have used the image of a material arrow icon by importing it from the assets, but we know that all the material icons are integrated with Flutter.

Why have I imported the material icons externally?

I used the Icons integrated with Flutter during the initial build of the UI, but these icons were not displaying on the screen rather they were replaced by a Placeholder icon. So, I had to import them externally from the Material Design Website.

For the rest of my app, I have tried to use as much of the original code of the “Relax” app as I could. But to properly use the small screen real estate of the watch I had to tweak the code.

relax_menu.dart

In this screen, I have used a Column with SingleChildScrollView to show the list of different relax sound screens.

The final screen looks like this:

Relax Menu

The code for building this UI is given below:

sound_screen.dart

In this screen, mostly the audio playback is handled by using the plugin “audioplayers” and a beautiful background animation is added, which transitions between two images for each screen.

Erin Morrissey has handled the audio playback and the background animation perfectly in this screen.

The only thing that I had to do is to properly fit the contents in such a small screen. I have used “BoxFit.fill” with the background images and I have centered the Column containing two widgets:

1. Text widget (Heading of the screen)
2. Play/Pause icon button

The final screens look like this:

Sound Screens

The code used for building this UI is given below:

So finally, we have completed our Wear OS project, rather you can call it as a FlutterOS.

Conclusion

After creating this project, I admit that Flutter is not optimized for Wear OS devices till now as many of the simple things are not working on Wear OS like all material Icons which are included in Flutter are not displaying on Wear OS devices.

The most important thing is that Flutter being a cross-platform app building tool does not work on watchOS devices until now. I hope that watchOS support is added to Flutter as soon as possible.

You can find the GitHub repo for this project in the following link:

sbis04/flutter_os_wear

If you like this project, please give “Star” ⭐️ to my GitHub repo.

Thank you for reading, if you enjoyed the article make sure to show me some love by hitting that clap button (👏)!

You can Sign Up to the blog on my website:

Flutter Blog | Souvik Biswas

If you want to support me and want me to continue writing Flutter articles, please contribute to my Patreon page below:

Souvik Biswas is creating Flutter Apps | Patreon

Happy coding…

Souvik Biswas