Disclaimer
The Flutter for Tizen software suite is still in an early development stage. The tools and plugins that are available are best suited for stand-alone apps. There is currently no Flutter support for bluetooth communication, haptic feedback, or bezel usage. You can submit and view issues/feature requests here.
Among the plethora of announcements made at Google IO this year there was one of particular interest to Flutter developers: Samsung is working to port Google’s Flutter SDK to Galaxy Watch and other Tizen devices. While the word “Tizen” might not ring any bells, the likelihood that there’s a Tizen device within 15 feet of you is pretty high. Tizen is an open-source Linux-based operating system used primarily by Samsung in their mobile, wearable, and household products (think refrigerators). With that said, this announcement is huge. Flutter was already popular for its write once, run everywhere motto but this announcement really drives the message home. With Flutter, you’ll be able to program hundreds of thousands of devices that people interact with every day.
https://platform.twitter.com/widgets.jsWe’re combining the best of @wearosbygoogle and @SamsungMobile Tizen into a unified wearable platform. ⌚ Apps will start faster, battery life will be longer and you'll have more choice than ever before, from devices to apps and watch faces. #GoogleIO pic.twitter.com/vj2aYZD81x
— Google (@Google) May 18, 2021
In this article, I’ll be showing you how to create a Flutter application for a Samsung Galaxy watch using the Flutter for Tizen SDK extension. I’ll be building the app on a Windows machine using the Android Studio IDE.
Setup
To start, cd to your preferred download location and clone the flutter-tizen repository:
git clone https://github.com/flutter-tizen/flutter-tizen.gitThen add the flutter-tizen/bin path to your environment variables.
On Windows, you’ll also need to install python. You can install it from the Microsoft store if you don’t have it by running python3 in the command prompt and tapping the “Get” button.
With these tools set up, you can create a new project folder, cd into it and run the following command to create a new Flutter Tizen project:
flutter-tizen create .The flutter-tizen creation tool sets up a template app that looks almost identical to the regular Flutter starter app. If you scan the project directory however, you’ll see an additional Tizen folder at the same level as the android and ios folders.
The default starter app for Tizen does not use null safety (shame) either so you’ll want to change the environment SDK to “>=2.12.0 <3.0.0” in the pubspec.yaml file.
To use Tizen-specific command line tools, you’ll also need to install the Tizen SDK. Follow the instructions at this link to install the SDK and Tizen Studio’s package manager. To avoid some annoying blockers, make sure to install Tizen at a path that does not contain spaces in the name.
Finally, download .NET CLI if you don’t have it already.
As a gut check, run flutter-tizen doctor to verify that everything’s as it should be. Green means go!
Running the Starter App
As with all things that appear complicated, starting as simple as possible is wise. In this case, we’ll be running the starter app on both a real device and on an emulator.
Real Device
There are pros and cons to running your app on a real device as opposed to an emulator. On the pro side, you can manually interact with the device, you’ll also use less RAM during development, and you won’t need to install HAXM on your machine. This is especially nice if you run emulators on Android Studio with Hyper-V (more on this later). On the con side, installing apps and making updates in real time takes longer since the data is transferred over your network. And, the setup for using a real device is much more involved.
There are a few steps to prep your device for testing:
- Turn on developer mode by following the instructions here
- Turn on debugging under Settings > About Watch > Debugging
- Make sure the device is connected to your computer’s Wi-Fi
- Make sure Wi-Fi is set to always on
- Make sure bluetooth is turned off
Now restart your device.
To communicate with the device over your network, you’ll also need to setup the Smart Development Bridge (sdb) command line tool. This comes with the Tizen SDK but in order to use it in a terminal, you have to add the {Tizen/tools} pathway to your PATH variable.
The next step is to connect to your device using one of two options.
Device Manager
Tizen Studio has a device manager that you can access from the top toolbar of the IDE. When you open it, you can select the ‘Remote Device Manager’ icon in the top right to view exisitng devices. If you tap the ‘Scan Device’ icon, your watch should show up in the list of devices. If it doesn’t you can manually configure your device by pressing the ‘Add Device’ icon. The default port is 26101.
sdb Tool
The sdb command line tool is arguably quicker to use.
- Locate your smartwatch’s IP address under Settings > Connections > Wi-Fi > Wi-Fi networks > {Your network} > IP address
- Make sure your device is connected to the same network as your computer (in the command prompt, you can run ping {your device’s IP address})
- In a terminal, connect to your device
sdb connect 192.168.0.18Once your connected, you can run the sdb devices command in the terminal to see you device.
Setting up your testing device is 80% of the battle. The last 20% is setting up your certificate and running the app. As mentioned in the flutter-tizen docs, a valid certificate is needed to install the app on Tizen devices and/or publish your app on the Galaxy Store.
Before you begin actually creating the certificate, open the Package Manager and install the Samsung Certificate Extension which “makes it possible for application developers to run Tizen applications on Samsung devices according to the certificate policy”.
Now, proceed with creating your certificate. I’ve found the easiest way to do this is to use the Certificate Manager included with your Tizen download.
The steps to create a new certificate are shown here:
- Click the plus icon to start the certificate creation process
- Select the Samsung option (for the Galaxy watch)
- Select Mobile/Wearable
- Name the certificate
- Enter your author name and password
- Sign into your Samsung Account
- Create a new Certificate Profile
- Verify that your device’s DUID is already added to the list of DUIDs (this is done automatically). You can locate your device’s DUID by opening the Device Manager and right-clicking on your device.
At the end of the process, the new certificate should be set as the default certificate.
Unfortunately, it’s not that easy. In order for the flutter-tizen command to use the new certificate, you’ll need to open the tizen/Runner.csproj file and add a new property group anywhere between the <Project> tags. The Author path should be the path to your new certificate and the Distributor path should be the path to your Samsung Certificate (which you downloaded using the Package Manager).
<PropertyGroup>
<AuthorPath>H:/iot/Tizen-studio-data/keystore/author/Mullr-certificate.p12</AuthorPath>
<AuthorPass>password</AuthorPass>
<DistributorPath>C:\Users\joeco\SamsungCertificate\Mullr-certificate\distributor.p12</DistributorPath>
<DistributorPass>password</DistributorPass>
</PropertyGroup>Now you can run your app. Cd into the project folder and run:
flutter-tizen runhttps://platform.twitter.com/widgets.js#Flutter for #Tizen!!
— Joe Muller (@Mullr33) May 20, 2021
I admit there were a handful of gotchas during the setup but this is awesome. I'll be publishing an article on the process later this week 💻@FlutterDev @TizenExperts @SamsungUS @googledevs #GoogleIO #flutterDev #coding #galaxywatch pic.twitter.com/Co8GBvt7ha
Emulator
If you primarily develop with Android Studio, testing apps on Tizen emulators can start off being extremely frustrating. Depending on your graphics card and virtualization setup, you may run into errors when you try to run Android and Tizen emulators back to back. Tizen emulators require the HAXM virtualization engine whereas Android Studio emulators can use HAXM or Hyper-V…and no, you can’t choose to use both. If you’ve been using Hyper-V in Android Studio, now may be the time to switch.
Instructions on setting up HAXM can be found here. I’ve summarized the steps here:
- If you are using Hyper-V, turn it off
- Open the SDK manager in Android Studio
- Select SDK Update Sites
- Select the Intel HAXM option to download the virtualization engine (or download from here)
- Check that HAXM is running by typing
sc query intelhaxmin the command prompt
Once HAXM is installed, open the Tizen Emulator Manager and create a new emulator with the “Create” button. Then, select your device and “Edit” it. Navigate to the “HW Support” tab and turn on CPU VT (CPU Virtualization):
Now press Launch! If all goes well, you’ll see the emulator pop up on screen. Because you’re using HAXM, you can pull up an Android watch emulator at the same time.
Watch Development BAsics
Embracing the Circle
Since most watch faces are circular, you’ll need to adjust how you design your user interface. If you don’t, you’ll end up with something that looks like this:
In short, your rectangular UI is rendered but you can only see what’s visible inside the watch face. The SafeArea widget doesn’t work on non-mobile devices either so your best bet when starting off is to use a combination of the Center and FittedBox widgets.
Scaffold(
body: Center(
child: FittedBox(
fit: BoxFit.scaleDown,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
color: Colors.indigo,
height: 100,
width: 100,
),
Container(
color: Colors.red,
height: 100,
width: 100,
),
Container(
color: Colors.green,
height: 100,
width: 100,
),
],
),
)
),
);
If you’re a bit more adventurous, you can check out this GitHub repo on setting up a custom polar coordinate system in Flutter (Shout out to @_eseidel on Twitter for the reference).
If you’re just looking to get up and running quickly, the following list of packages are especially useful for the circular screen shape:
- circular_widgets – Arrange your widgets (you guessed it) in a circle
- circular_menu – Arrange your menus in a circle
- circular_countdown_timer – Countdown time in style
Tizen Packages
If you want to do anything out of the ordinary, you’re probably going to need a Flutter package or plugin. The Tizen team has released a bunch of Tizen-specific plugins on pub.dev and they can help you do everything from reading sensor data to getting device info or launching a URL.
Many (if not all) of these Tizen plugins are platform-specific implementations of existing plugins available on pub.dev. In the Tizen plugin repository, you can find Tizen versions of the device_info, battery, and connectivity packages among others. You can reference this table to see which packages are endorsed. For those that are not, you’ll need to include both the Tizen and original packages in your pubspec.yaml file. For example, to use the battery_tizen package, your dependencies would look like this:
battery: ^2.0.1
battery_tizen: ^2.0.0Don’t use Spaces in your Project Pathway
All of the Tizen-specific plugins need to “build” before your app is deployed to a device or emulator. If any folder in your project pathway has a space in it, your build will fail! Trust me, I wasted an hour trying to figure out what was going wrong…
The available Tizen plugins are limited at the moment but the team has encouraged developers to file an issue in their repo if there’s an unsupported package they need.
Gotchas
Please ensure that the SDK and/or project is installed in a location that has read/write permissions for the current user.
Make sure your Tizen/tools directory is located somewhere that your current user has permission to access. I hit this error a few times early on when using flutter-tizen run.
Can not get the toolchain id.
Make sure you’ve downloaded the Gcc 9.2 toolchain using the package manager
Conclusion
Flutter is a force to be reckoned with and every other day it shows up in some place new (Toyota, eBay Motors, BMW, Tencent, Philips, and plenty others). With the new partnership between Google and Samsung’s wearable divisions kicking off, I wouldn’t be surprised if the Flutter takeover continues to accelerate.
As exciting as this all is though, it would be remiss if I didn’t mention the recent announcement by Samsung that their upcoming devices will not run on Tizen. Starting as early as October 2021, new Samsung wearables will run on Google’s Wear OS. This isn’t actually terrible news for Flutter developers excited about creating Tizen apps – Flutter runs on Wear OS too.
Support
I love to write informative tech articles and I plan on doing it as long as I can find the time. If you found this article helpful, consider supporting me!
Joseph Muller is developing Flutter apps for 2021
Mullr Dev 