Implementing Wear OS & Watch App Companions

Introduction

Flutter’s cross-platform abstraction can extend native Android apps to Wear OS, delivering companion watch experiences tied to your mobile app. In this tutorial, you’ll create a dedicated Flutter module for Wear OS, sync data via the Data Layer API and platform channels, adapt UI for round screens, and deploy using the Flutter CLI and Android Studio. By treating the watch as a Flutter module embedded in your Android host, you maintain a single codebase and streamline updates.

Setting Up the Wear OS Companion

Begin by creating a Flutter module for your watch app in the root of your existing mobile project:

flutter create --template module wear_module

Next, include the module in your Android settings:

// android/settings.gradle
include ':app', ':wear_module'
project(':wear_module').projectDir = file('../wear_module')

Then link the Wear app in your mobile app’s Gradle:

// android/app/build.gradle
dependencies {
  implementation project(':wear_module')
  wearApp project(path: ':wear_module', configuration: 'release')
}

Modify your AndroidManifest in wear_module/android/src/main/AndroidManifest.xml to declare <uses-feature android:name="android.hardware.type.watch" android:required="true"/> and configure your watch activity.

Sync Data between Phone and Watch

Wear OS uses the Data Layer API for reliable messaging. Wrap Data Layer calls in a MethodChannel for Dart access. In your mobile and watch modules, define a shared channel name:

// wear_module/lib/data_sync.dart
import 'package:flutter/services.dart';
final MethodChannel _channel = MethodChannel('com.example.sync');

Future<void> sendStepCount(int steps) async {
  await _channel.invokeMethod('sendSteps', {'count': steps});
}

On the Android side (in both modules), implement a MethodChannel.MethodCallHandler that uses Wearable.getDataClient() to send or receive data items. Ensure you grant com.google.android.gms.permission.ACTIVITY_RECOGNITION for fitness data.

Building Watch-Specific UI

Wear screens are typically small and round. Use LayoutBuilder and MediaQuery.of(context).size to adapt layout:

• Prioritize glanceable information. Use large, legible text.

• Leverage CircularAppBar widgets from wear packages, or custom Stack layouts.

• Keep interactivity minimal: one primary action, one secondary.

Example responsive snippet:

Widget build(BuildContext context) {
  final size = MediaQuery.of(context).size;
  return Center(
    child: Container(
      width: size.width * 0.8,
      height: size.height * 0.5,
      alignment: Alignment.center,
      child: Text('Steps: \$steps', textAlign: TextAlign.center),
    ),
  );
}

Follow Material You guidelines: use circular buttons at the bottom and haptic feedback via HapticFeedback.lightImpact().

Debugging and Deployment

To deploy to a Wear OS emulator or device, first launch a Wear OS virtual device in Android Studio’s AVD Manager. Then run:

flutter devices  # confirm your Wear device ID   
flutter run -d  --target

You can also attach via Android Studio: open the wear_module folder as a project, select the Wear emulator, and press Run. Use adb logcat to view Data Layer exchanges and ensure permissions are granted.

Conclusion

By embedding a Flutter module as a Wear OS companion, you maintain a unified Dart codebase and leverage familiar Flutter patterns. You’ve configured Gradle, synced data via platform channels, adapted UI for round screens, and deployed confidently. This approach accelerates development and ensures consistency across phone and watch experiences.