Flutter & Wear OS
[Link]
Hello there 👋
My name is
Renan Araújo
I live in Porto,
OSS Contributor for Blue Fire & OSS Engineer at Very Good Ventures,
You can see my socials and stu at [Link]
[Link]
ff
I have a condition…
[Link]
canIRunFlutterOnThis
syndrome
[Link]
Trying out something di erent
Making a Wear OS game
Challenged myself in one weekend, make a complete Wear OS game.
Requirements:
- Has to feel like it was made for the watch
- Has to perform well
- Don’t kill the battery
[Link]
ff
[Link]
[Link]
Running Deploying in
“Create” the store
[Link]
n s
s o
le s
o f
lo t
Running A Deploying in
“Create” the store
[Link]
Summary
We gonna talk about:
- What is exactly Wear OS and what means making an app for it
- What should we expect in terms of hardware
- Running Flutter on it
- Helpful Flutter resources
- Going to the store
[Link]
Part 1
Wear OS
[Link]
Wear OS
What exactly is that:
Wear OS is a version of Android, specific for Smartwatches
[Link]
Developing for smartwatches
Running apps in peoples wrists
Running a mobile application UI on a smartwatch is not a good idea.
Addressing some extra constraints can define the app usability
[Link]
Tiny displays
UIs for in between 1.24 and 1.4 inches
Make each view self-containing
Scrollable views should be used strictly when
necessary and obvious
Be careful with clickable areas of buttons
Shawn Rai @unsplash [Link]
One finger UI
🚫 multi-touch gestures
Shawn Rai @unsplash [Link]
Spare the battery
Don’t kill the
battery
Limited size = limited battery
Go easy on animations and be mindful of the CPU
and memory consumption.
Use dark mode.
Shawn Rai @unsplash [Link]
Spare the battery
Display shapes
Be prepared for Squared, circular, and even
Squircular displays
Blend with the display edges
Shawn Rai @unsplash [Link]
Spare the battery
Standalone apps
Wear OS apps can run alongside a companion
smartphone App or be totally independent
Shawn Rai @unsplash [Link]
Part 2
Hardware interface
[Link]
More than the touch screen
Inputs may vary
- Touch screen
- Rotary input
- Physical buttons
- Sensors
[Link]
Rotary input can be a Physical bezel, a crown or a virtual bezel
[Link]
Part 3
Running Flutter on it
[Link]
It is not o icial but it totally works…
Wear OS support on Flutter
- There is no o icial support (from the Flutter team). E orts in this area
are all from the community
- Most Android plugins should work fine on WearOS
- Specific WearOS APIs (such as Health services) are callable via Method
calls
- No Wear-specific API baked into the Framework
- Uses the “android” directory in the app project
[Link]
ff
ff
ff
Live code time…
[Link]
Part 4
Useful resources
[Link]
Useful packages
“wear” by the Flutter community: Helps to detect
ambient mode changes and the shape of the display.
“wearable_rotary” by the Tizen team: Handles rotary
input events
[Link]
Very good
template
very_good create flutter_app -t wear
Kickstart a Flutter app ready for Wear OS in seconds
Using the very good CLI:
[Link]
[Link]
Very good
template
very_good create flutter_app -t wear
Kickstart a Flutter app ready for Wear OS in seconds
Using the very good CLI:
[Link]
[Link]
Part 5
Going to the store
[Link]
Play Store
Deploying a Wear OS app can be tricky
- Must mention “Wear OS” on their pages, in the description, and in the
title.
- It is necessary screenshots on multiple screen shapes and sizes
- Screenshots should contain the app interface only
[Link]
Play Store
Approval phases in the first deploy
Wear OS apps go through two approval phases: The standard one and the
Wear OS specific.
The second approval may take some days.
To start the second approval, go to
Console > Advanced settings > Form factors > Add “Wear OS”
[Link]
Thank you
@reNotANumber
[Link]