Step into Galaxy Watch App Development Using Flutter
Yasin Hosain
Engineer, Samsung Developer Program
The Samsung Galaxy Watch is an essential gadget for modern health-conscious people. It provides health-related data that helps to prevent health issues. These Galaxy Watch features are driving its rapid rise in popularity and encouraging application developers to create applications specifically for it.
The Galaxy Watch offers a great user experience and performance. This is where the Flutter framework plays a crucial role. It is a top choice when it comes to a beautiful UI, good performance, and rapid development. Flutter offers cross-platform support, which means we can build applications for multiple platforms using a single code base. With Flutter’s strong community support, developers can make production-grade applications with little effort.
This blog outlines the steps involved in creating an application for the Galaxy Watch using Flutter, allowing you to explore the possibilities it offers.
Set up your environment
Please follow the official Set up Flutter guide to install the Flutter framework correctly on your device. After the installation, please check the status by running the following command. It tells you if any component is missing or suggests what to do next.
flutter doctor
Get started with Flutter projects
To simplify this application example, we are retrieving the battery levels from a Galaxy Watch to make it easy to understand the development process.
In this blog, we use Android Studio as the IDE. But, if you are comfortable with VS Code, you can follow this Official Codelab to build your first Flutter application with that instead.
To start, install the Flutter and Dart plugins on Android Studio. These plugins make it easier to manage Flutter development using the UI instead of the CLI.
Figure 1: Install Flutter and Dart plugins
After completing the setup, it is time to create the Flutter Project for Galaxy Watch.
- Go to File > New > New Flutter Project. Note that this method only appears if you installed the plugins mentioned above.
- Select Flutter from the left side panel and set the Flutter SDK path where it was installed during the Flutter setup, and click the Next button.
- Enter a project name and location, and choose the language according to your preferences. Uncheck all platform options except Android and keep the other options as they are.
- Click the Create button, and a new window should open with the project.
You are now done. Next, we need to modify the code for Galaxy Watch.
Break down the elements of a Flutter project
A simple Flutter project for the Android platform contains the following folders:
android/: Contains Android platform code and configurations.lib/: The main folder for a Flutter application. It contains your Dart code. Themain.dartfile is the entry point of a Flutter application.pubspec.yaml: A configuration file for Flutter. It manages the application’s dependencies and assets.
Configure the project to support Galaxy Watch
-
Let’s modify the generated code to include the battery level, allowing it to be displayed. Open the
pubspec.yamlfile and add the following plugins under dependencies:dependencies: flutter: sdk: flutter wear: ^1.1.0 battery_plus: ^6.0.3We use the wear and battery_plus plugins for this project. The wear plugin provides APIs for wear-related functionality, and battery_plus is for accessing battery information from the OS. Both plugins were developed by the Flutter Community. You can even get battery information or trigger Wear OS native APIs using the Method Channel, which we will cover in our future blogs.
-
Change the value of minSdk to 23, which is required for the plugins that we are using. Go to android > app > build.gradle and change the
minSdkproperty value underdefaultConfig.defaultConfig { applicationId = "com.example.flutter_app" minSdk = 23 targetSdk = flutter.targetSdkVersion versionCode = flutterVersionCode.toInteger() versionName = flutterVersionName } -
Add the following code to your
AndroidManifest.xmlfile, above the<application>tag. This tag defines that we are building the application for watches.<manifest xmlns:android="http://schemas.android.com/apk/res/android"> <uses-feature android:name="android.hardware.type.watch" /> <application android:label="galaxy_watch_battery_info"
Build the watch application
The main challenge is crafting your application to fit a tiny screen. We must be aware of good practices regarding UI, UX, and compactness at the same time. But as mentioned, this application is a simple one.
Here we work with the build function of the MyHomePage class, where the UI implementation is applied. The main() function is the starting point for a Flutter application. It triggers the build function sequentially. Refer to the following build method for an example.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Galaxy Watch Demo',
theme: ThemeData(
visualDensity: VisualDensity.compact,
useMaterial3: true,
colorSchemeSeed: const Color(0x9f4376f8),
),
home: Scaffold(
body: SafeArea(
child: _getWatchView(context),
),
),
);
}
The widgets we use are:
MaterialApp: The root widget that contains all the contents of the application UI and provides application functionalities like home, theming, navigations, localizations, and so on.Scaffold: It provides a visual layout structure for an application, which has options like an app bar and body.SafeArea: A widget that encircles its child to ensure it avoids overlap with the OS interface.
Tailor the UI
We can now access the WatchShape widget since we converted our application to a watch application. WatchShape is the key widget for watch UI design. It provides the basic interface shapes for watches along with ambient modes of the watch. As mentioned earlier, the UI has a simple button that queries the battery level and shows it in a dialog.
Widget _getWatchView(BuildContext context) {
return WatchShape(
builder: (BuildContext context, WearShape shape, Widget? child) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [const Text("Hello from Galaxy Watch"),
ElevatedButton(onPressed: () {
_battery.batteryLevel.then((batteryLevel) {
showDialog<void>(context: context,
builder: (_) => AlertDialog(
content: Text('Battery: $batteryLevel%'),
actions: <Widget>[
TextButton(
onPressed: () {
Navigator.pop(context);
}, child: const Text('OK'),
)
]));
});
}, child: const Text('Get battery level'))])
);
},
);
}
The widgets we use are:
WatchShape: This widget makes the UI compact to fit the watch’s small screen.battery.batteryLevel: To access the battery information, we need to create an instance of theBatteryclass. Please refer to the following code as an example.
final Battery _battery = Battery();
Test the application
Now it’s time to see how your application works. Save all the changes and run the application by clicking the Run button from the “Main Toolbar.” You should see a new UI titled “Hello from Galaxy Watch” with a single button. You have created a Flutter application for a Galaxy Watch. Congratulations!
Figure 2: Sample application
Conclusion
This blog walked you through building an application for Galaxy Watch. Flutter offers an amazing toolkit for crafting beautiful UIs. Within a short time you can build applications on a device to accomplish what you want.
Don’t forget to experiment with building applications and enjoy the journey of creating something new for Galaxy Watches. For more tips and tricks on Galaxy Watch application development, please keep your eyes on the Samsung Developer portal.
