Watch app development - flutter-tizen/flutter-tizen GitHub Wiki

This page contains some useful tips for developing Flutter apps for Tizen watch devices.

The Tizen-specific part of your app project (the code in the tizen directory) can be written in either

• C# (default, universal)
• C++ (not compatible with TV devices)

If your Flutter app will run on non-TV devices only, you can optimize its performance and save memory (by up to 20 MB) by changing its language to C++.

To change the language of an existing app project, re-generate the project with the --tizen-language cpp option:

$ cd my_app

# Delete the `tizen` directory.
$ rm -rf tizen/

# Create the project again.
$ flutter-tizen create --tizen-language cpp .

You may back up the content of tizen/tizen-manifest.xml before deleting the file if you've modified the file manually.

Flutter apps are rectangular by default, so some part of their UI may become invisible on devices that have non-rectangular screens.

Rendered	Visible

Therefore, when you develop a watch application, you need to carefully design its user interface so that it fits inside the circular watch face gracefully. You may either create things from scratch, or find existing widgets that fit your need from the widget catalog or pub.dev.

• percent_indicator
• sleek_circular_slider
• step_progress_indicator
• syncfusion_flutter_gauges

• Fancy Progress Indicators in Flutter🎯 — without Custom Paint by Paras Jain
• Introducing a new Flutter widget animator by Ezaldeen sahb

Rotary events are triggered by a watch device when its bezel is rotated clockwise or counterclockwise. You can use the wearable_rotary plugin package to handle the events in your Flutter app to implement, for example, a scroll animation of scrollable widgets. For any details, you may refer to the example code of the plugin.

A watch device often doesn't have its own data connectivity (Wi-Fi or cellular network), but uses its paired phone's connection to connect to the Internet. To enable Internet access of your watch apps over a phone network via Bluetooth, you need to configure them to use web proxy.

1. Add the following privileges to your app's tizen-manifest.xml.

   <privileges>
     <privilege>http://tizen.org/privilege/internet</privilege>
     <privilege>http://tizen.org/privilege/network.get</privilege>
   </privileges>

2. Add the following dependencies to your app's pubspec.yaml. We will use the tizen_interop package to directly access Tizen native APIs.

   dependencies:
     ffi: ^2.0.1
     http: ^0.13.5
     tizen_interop: ^0.2.0

3. Define the getProxyAddress function as follows which detects the current network type of the device and returns a proxy address (if available) in the HOST:PORT format (otherwise null).

   import 'dart:ffi';
   
   import 'package:ffi/ffi.dart';
   import 'package:tizen_interop/4.0/tizen.dart';
   
   String? getProxyAddress() {
     return using((Arena arena) {
       final Pointer<connection_h> pConnection = arena();
       if (tizen.connection_create(pConnection) != 0) {
         return null;
       }
       final connection_h connection = pConnection.value;
   
       try {
         final Pointer<Int32> pType = arena();
         if (tizen.connection_get_type(connection, pType) != 0) {
           return null;
         }
         // The Ehternet type means that the device is connected to a phone
         // and thus can use a proxy network.
         if (pType.value != connection_type_e.CONNECTION_TYPE_ETHERNET) {
           return null;
         }
   
         final Pointer<Pointer<Char>> pProxy = arena();
         const int addressFamily =
             connection_address_family_e.CONNECTION_ADDRESS_FAMILY_IPV4;
         if (tizen.connection_get_proxy(connection, addressFamily, pProxy) != 0) {
           return null;
         }
         arena.using(pProxy.value, calloc.free);
   
         return pProxy.value.toDartString();
       } finally {
         tizen.connection_destroy(connection);
       }
     });
   }

4. Create an instance of IOClient with the proxy information to establish an HTTP connection.

   import 'dart:io';
   
   import 'package:http/http.dart';
   import 'package:http/io_client.dart';
   
   final HttpClient httpClient = HttpClient();
   
   final String? proxyAddress = getProxyAddress();
   if (proxyAddress != null) {
     httpClient.findProxy = (Uri uri) => 'PROXY $proxyAddress';
   }
   
   final IOClient http = IOClient(httpClient);
   final Response response = await http
       .get(Uri.parse('https://jsonplaceholder.typicode.com/albums/1'));
   
   print(response.body);