Introduction

Flutter’s cross-platform capabilities now extend to wearable devices, enabling developers to target wear os and watchOS from a single codebase. This tutorial covers advanced techniques for creating companion and standalone wearos apps on Android, plus watchOS targets using Flutter. We’ll dive into toolchain setup, wearable-specific UI, native integrations via platform channels, and performance optimizations critical for low-power devices.

Setting Up the Toolchain

Before writing any Dart code, configure your environment for Wear OS and watchOS builds.

• Install Flutter SDK (≥2.10) and add appropriate channels:

flutter channel stable
flutter upgrade
flutter config --enable-windows-desktop  # if on Windows

• Android Studio:

– SDK Platforms: Android 11+

– Wear OS System Images for emulator

– Gradle plugin: com.android.tools.build:gradle:7.0+

• Xcode:

– Install Xcode 13+

– Enable “Add target” → watchOS App in Runner project

• Update android/app/build.gradle for wear os:

defaultConfig {
    applicationId "com.example.wearos"
    minSdkVersion 23
    targetSdkVersion 31
    versionCode 1
    versionName "1.0"
    wearApp true
}
dependencies {
    implementation "com.google.android.support:wearable:2.8.1"
    compileOnly "com.google.android.wearable:wearable:2.8.1"
}

• Update ios/Runner.xcodeproj:

– Add watchOS App and WatchKit Extension

– Link Flutter.framework in both targets

Building a Wear OS Companion App

Wear OS apps often complement a phone application. Flutter’s multi-module support lets you share most of your UI code.

1. Create a Flutter module in your Android project:
   

   flutter create -t module wear_module

2. In your phone app’s settings.gradle:
   

   include ':app', ':wear_module'
   setProjectDir(':wear_module', file('../wear_module'))

3. Add dependency in app/build.gradle:
   

   implementation project(path: ':wear_module')

Implement key wear os features: always-on mode, ambient backgrounds, and gesture detection. Use the wear plugin:

import 'package:flutter_wear/wear.dart';

class AmbientAwareWidget extends StatefulWidget {
  @override
  _AmbientAwareState createState() => _AmbientAwareState();
}

class _AmbientAwareState extends State<AmbientAwareWidget> {
  bool isAmbient = false;
  @override
  Widget build(BuildContext context) {
    return WearMode(
      onAmbientModeChanged: (ambient) => setState(() => isAmbient = ambient),
      child: Container(
        color: isAmbient ? Colors.black : Colors.blue,
        child: Center(child: Text(isAmbient ? 'Ambient' : 'Active')),
      ),
    );
  }
}

To access onboard sensors (heart rate, accelerometer), use a MethodChannel:

static const _sensorChannel = MethodChannel('com.example.wear/sensors');

Future<int> readHeartRate() async {
  final int rate = await _sensorChannel.invokeMethod('getHeartRate');
  return rate;
}

On Android side (WearSensorService.kt), implement getHeartRate via SensorManager.

Extending to watchOS

Flutter doesn’t natively support watchOS UI, but you can embed a Flutter engine to power logic and render small widgets in SwiftUI/WatchKit.

1. In Xcode, add a WatchKit target.

2. Link Flutter.framework to your WatchKit extension.

3. Initialize Flutter engine in ExtensionDelegate.swift:

import WatchKit
import Flutter

class ExtensionDelegate: NSObject, WKExtensionDelegate {
  lazy var flutterEngine = FlutterEngine(name: "watch_engine")

  func applicationDidFinishLaunching() {
    flutterEngine.run()
  }
}

4. Use FlutterMethodChannel for communication:

let channel = FlutterMethodChannel(
  name: "com.example.watch/data",
  binaryMessenger: flutterEngine.binaryMessenger
)
channel.setMethodCallHandler { call, result in
  if call.method == "fetchSummary" {
    // compute or fetch data
    result(["steps": 3450])
  }
}

5. In your WatchKit Interface Controller:

class InterfaceController: WKInterfaceController {
  override func willActivate() {
    super.willActivate()
    channel.invokeMethod("fetchSummary", arguments: nil) { response in
      // update watchOS UI
    }
  }
}

Design small SwiftUI views for glanceable data, delegating heavy logic to Dart.

Optimizing UI and Performance

Wearables have limited CPU, memory, and battery. Follow these advanced tips:

• Minimize widget rebuilds

– Use RepaintBoundary for static parts.

– Prefer const constructors.

• Efficient animations

– Avoid continuous AnimationController; use implicit Animated* widgets.

– Lower frame rate:

WidgetsBinding.instance?.window.onBeginFrame = (Duration _) {
  // throttle frames
 };

• Reduce package size

– Enable --split-debug-info for Dart AOT:

flutter build apk --target-platform android-arm64 \
     --split-debug-info

– Strip unused locales and assets in pubspec.yaml.

• Battery-conscious sensors

– Batch sensor sampling on Android with registerListener batch mode.

– On watchOS, schedule background refresh judiciously.

• Test on real hardware

– Use adb commands:

adb shell settings put system screen_off_timeout 600000

– For watchOS, profile CPU and memory in Instruments.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

By sharing Flutter modules between phone, Wear OS, and watchOS targets, you streamline development while delivering native-grade wearables experiences. Advanced integration patterns—platform channels, ambient modes, engine embedding—let you harness each platform’s unique features. With careful UI optimization and power management, your Flutter-powered wearable app will run smoothly on both wear os and watchos devices.