Flutter Wear ⌚ #

Flutter wear is a library for flutter aspiring to be a one-stop shop for all related features for android wear (We're not there yet, but will slowly get there 🙃).

This library is still in very very early development, and breaking changes may be introduced every version !

Planned features 📋 #

• ❌ Add support for tile lifecycle events (onTileAddEvent() for example)
• ❌ Support tile animations
• ❌ Support hot reload for tiles (only in preview).
• ❌ Incorporate app themes
• ❌ Improve UI exceptions
• ❌ Create wear widgets system (like package:flutter/material.dart)
• ✅ Upgrade tiles to new version (1.2.0)
• ❌ Add Tests
• ✅ Automate tiles syncing
• ❌ Add support for health services for wear apps and tiles (androidx.wear.protolayout.expression.PlatformHealthSources for tiles, research more for in app service)

Installing #

1. With Dart: $ dart pub add flutter_wear

2. With Flutter: $ flutter pub add flutter_wear

3. Manually:

dependencies:
  benchmark: ^0.3.0

Don't forget to set android compileSdkVersion to 34 and minSdkVersion to 28 in the build.gradle !

android {
  compileSdkVersion 34
  ...
  defaultConfig {
    minSdkVersion 28
  }
}

Features ✨ #

Communication between devices 📞 #

Get all available nodes :

final nodes = Wear.getNodes();

Send message to device :

// Path is like route, to know where to direct to message
Wear.send(WearMessage.string("PATH", data), nodeId: watch.id /* or phone */);

Send message to all devices (Fit for cases where only one device is connected) :

Wear.send(WearMessage.string("PATH", data));

Listen for incoming messages :

Wear.listen("PATH", _onIncomingMessage);

// Dont forget to removeListener !
Wear.removeListener("PATH", _onIncomingMessage);

Tiles 🍫 #

Tiles can finally be made using Flutter 💙 !

The following code :

class WeatherTile extends Tile<WeatherInfo> {
  const WeatherTile();

  @override
  Future<WeatherInfo?> createState() {
    return FakeWeatherProvider().getWeather();
  }

  @override
  TileWidget build(TileContext context, WeatherInfo? state) {
    if (state == null) return const Text("Something went wrong...");

    return PrimaryLayout(
      body: _Forecast(temperature: state.temperature),
      title: _Location(location: state.location),
      chip: _Humidity(humidity: state.humidity),
    );
  }

  @override
  Map<String, TileResourceProvider> resources(TileContext context, WeatherInfo? state) => {
        'forecast_cloudy_day': TileResources.asset("assets/weather/forecast_cloudy_day.png"),
        'forecast_humidity': TileResources.asset("assets/weather/forecast_humidity.png"),
        'location': TileResources.asset("assets/weather/location.png"),
      };
}

Notice of the tile is on the watch tiles carousal between other tiles (Tile Magic 😵).

Learn more about tiles here !

Reading Materials 👓 #

• https://developer.android.com/design/ui/wear/guides/surfaces/tiles
• https://developer.android.com/training/wearables/tiles
• https://developer.android.com/design/ui/wear/guides/foundations/getting-started
• The docs, duh