In this tutorial, we'll learn to develop a Flutter app compatible with Wear OS as well as all official platforms officially supported.

Furthermore, we won't limit ourselves to creating only basic "counter" apps.

Flutter stands out among other frameworks by enabling app development on multiple platforms from a single codebase, making the framework an attractive solution for app creation and operation across Android, iOS, web, Windows, and MacOS Linux platforms as of Flutter 3.0.

One key advantage to choosing Flutter over other approaches to app creation is being able to publish work to each of these platforms with little platform specific code required compared to traditional approaches for application creation.

transform your app: the impact of android & wear os integration

Wearable Android Phone: Windy Conditions Compatibility

Wearable Android Phone: Windy Conditions Compatibility

Let's examine a sample app we will be using in this post and some others on similar subjects.

Plan B is to develop a Flutter app utilizing OpenAI text completion as our weather prediction engine. No longer do we rely on rain gauges and wind speed sensors; machine learning - an integral component of computer science innovation - will give us accurate weather predictions that we have named "Partly Windy."

Prerequisites: Knowledge Of The Method

Prerequisites: Knowledge Of The Method

Before we dive in and begin programming, let's briefly discuss our strategy to develop a phone app from one codebase that can run both an Android phone and Wear OS wearable simultaneously.

It might appear daunting at first, but once we make sure we have an understanding of this challenge it should become evident. Our two core methods in this piece will include:

Boost Your Business Revenue with Our Services!

Use The Wear Plugin To Enable Wear OS Support

Use The Wear Plugin To Enable Wear OS Support

Wear OS isn't officially supported by Flutter yet (Flutter stable release 3.0.4), but you should keep in mind that the Wear app OS is simply an altered version of Android, an essential component in this project.

A few extra lines added or adjusted during the build are the only difference between an Android app experience and its Wear OS counterpart; you can find more details on the Android developer website regarding building Wear OS apps for more guidance on setting this up.

Utilizing The Screen Size, Identify The Type Of Device

Utilizing The Screen Size, Identify The Type Of Device

Flutter programmers need to select between Wear OS or Android user interface UI, depending on which host device it will run on, in order to provide seamless user experiences for their customers.

Device size will play an integral part in how our app manages this decision-making. LayoutBuilder class, which "builds a widget tree which depends on parent widget's sizes," serves as the cornerstone for this feature's implementation.

Flutter app experience renders either Wearable devices OS view or phone view depending on the width of the host mobile device - further expanding this logic could create different arrangements for tablets, PCs, etc.. Still, for simplicity's sake, we will keep things straightforward by only considering two device sizes in this piece.

Integrating Steps For Android And Wear OS

Integrating Steps For Android And Wear OS

Step 1: Establishing The Project

Go on to Part Two where we will work specifically on adding support for Wear OS to an already running Flutter project, or create one from scratch and add any required logic or plugins (that Flutter officially supports) so it works on Wear OS as well as Android (along with any additional platforms that Flutter might support).

Flutter Launch New Project In Flutter

This project utilizes an MVC architecture in Flutter that will enable our app to generate multiple views for various screen sizes while keeping all its logical components consistent.

Since running "flutter create" will result in a third-party app with limited separation of concerns, to get things underway more rapidly we will create our project using Barebones template, which already uses MVC architecture based on the "WidgetView" pattern. MVC architecture is already set up and ready.

Launch a new project and pay particular attention to WidgetView design when starting one from scratch, or opt for using Counter third-party app and the Barebones template as starting points for development.

Also Read: Tips to Identify Exceptional Android Developer Candidates for Your Next Project

Combine Android Studio And Your Wear OS Smartwatch

As this tutorial assumes you're beginning a more advanced Flutter project, this tutorial assumes you know how to connect your phone with Android Studio so you may develop and debug an application on it.

In addition, Wear OS watches may need to be connected in order to complete this endeavor. The Partly Windy app may be created and utilized on a Wear OS wristwatch in two distinct ways, using either an emulated wristwatch or real one.

Launch An Emulator For Wear OS

An emulated google smartwatch option can be easily utilized with Android Studio's Device Manager, where we will create our Wear OS emulator device by clicking "Create Device" at the top.

Virtual Device Configuration provides you with a list of different hardware types on the left side of its interface under the Select Hardware tab, from which you may select Wear OS from this selection.

There are four possible shape/size combinations; pick out which fits best your target audience. For optimal software display on different android device form factors, creating multiple Wear OS emulators of different sizes and shapes should help.

Create A Physical Wear OS Device

Android Studio makes it possible to target real Wear OS watches rather than emulators as the target for your app development process.

This option could prove particularly helpful if your computer lacks sufficient processing power or RAM requirements to run an emulator or if the nature of the app you're developing necessitates physical hardware (for instance, if creating fitness monitor apps).

Step 2: Open And Upload The Main.Dart File

Now that your app has been generated or loaded let's quickly review the main. The dart file works to set the stage for our tutorial.

Main. Dart serves a simple purpose in this project - configuring home pages, disabling debug banners, and setting light and dark themes.

At present, Partly Windy app only contains one page: DailyForecastRoute widget. In this post we will expand this widget's scope by including Wear OS support and various views for phones and watches; additionally we'll focus on designing device-specific user interfaces to optimize this experience for Wear OS devices and phones.

Step 3: Add Wear Os Support

Now is an apt time to tackle the main topic of this post - adding Wear OS functionality to our Flutter app. Remarkably, adding this capability is simpler than initially anticipated: the Flutter wear plugin must be added and minSdkVersion configured.

Set The Minimum Android SDK Version

Begin by setting the minimum Android SDK version to 23, which is required in order to create Wear OS apps with Flutter.

Open build. Gradle under Android > App> in your Flutter project to do this.

Include The Wear Plugin

Add Wear OS Native Support. There are still some adjustments necessary in your build. Gradle and AndroidManifest.xml files when developing Wear OS programs natively; you can read up on those details here.

Instead of manually adding these requirements ourselves, we will make use of a Flutter plugin called wear (currently in version 1.1.0 at the time of this writing), which handles adding them automatically for us along with providing some helpful Widgets, which will be discussed further later on in this project. To add it now, open up pubspec. yaml in your project directory root directory and add this line under the dependencies section:

Step 4: Download Different Watch And Phone Views

By identifying the screen size of its host device, the software will identify its type. Watches are defined as devices with screens smaller than 300 logical pixels while phones typically feature screens greater than 300 pixels.

Implementation involves two views which load depending on screen width value using LayoutBuilder Widget with BoxConstraints that measures width values; let's examine this further.

Step 5: Construct Wear OS Displays

So far, our Flutter app supports Wear OS, and we've implemented a system that enables it to automatically load multiple views based on the size of its host device.

Next comes building out these views; on phones, this process should follow similar to any other Android-compliant Flutter app; we will skip that part for clarity's sake and instead concentrate on building out Wear OS-specific views, which differ somewhat from traditional Android Flutter development methods.

Flutter wear plugin not only configures applications to support Wear OS, but it also offers three useful widgets to create smartphone views:

  • The WatchShape widget allows users to choose whether their watch should be round or square in shape.
  • The AmbientMode widget displays the current ambient or active mode of any watch at any point in time.
  • Instead of creating multiple WatchShape widgets across your widget tree, consider using the InheritedShape widget to transfer its shape.

View Loading Data Based On The Mode Of Host Device

View Loading Data Based On The Mode Of Host Device

Our most complex widget will be one that renders different user interface (UI) elements depending on whether our watch is operating in ambient or active mode.

To determine this operating mode, we can utilize the AmbientMode widget from the Wear plugin, as it contains two values-active and ambient for us to utilize for building this enum.

Related Services - You May be Intrested!

Construct The Ambient Mode UI

Construct The Ambient Mode UI

When your watch is set in ambient mode, its app will load a DailyForecastViewWatchAmbient widget, as shown above in Gist form.

This widget is extremely straightforward - simply displaying a black-backed scaffold and a simple widget with a daily forecast always on display. As we will cover Open AI interaction later on in the separate article(s), remember the WeatherForecast widget comprises only one Column with two Text widgets within.

Here is what the full DailyForecastViewWatchAmbient looks like:

Boost Your Business Revenue with Our Services!

Building The User Interface For Current Mode

Building The User Interface For Current Mode

The DailyForecastViewWatchActive widget, which displays a view while the watch is in active mode, resembles its ambient mode counterpart in several ways.

The app uses an ornamental backdrop with gradient that changes according to time of day when it's in active mode; for this, TimeGradient widget must be added as an extra widget which simply wraps a Container around which a linear gradient backdrop exists.

Get a Free Estimation or Talk to Our Business Manager!

Conclusion

Although Wear OS app development is currently unofficially supported by Flutter, we can still implement Wear OS compatibility into our applications with ease using the Wear plugin.

By creating universal apps from one codebase we can reach almost every operating system simultaneously - something this piece outlined.

Paul
Full Stack Developer

Paul is a highly skilled Full Stack Developer with a solid educational background that includes a Bachelor's degree in Computer Science and a Master's degree in Software Engineering, as well as a decade of hands-on experience. Certifications such as AWS Certified Solutions Architect, and Agile Scrum Master bolster his knowledge. Paul's excellent contributions to the software development industry have garnered him a slew of prizes and accolades, cementing his status as a top-tier professional. Aside from coding, he finds relief in her interests, which include hiking through beautiful landscapes, finding creative outlets through painting, and giving back to the community by participating in local tech education programmer.

Related articles