Flutter アプリを Apple Watch から操作する

このスクラップについて

このスクラップでは Flutter で作成したカメラアプリを Apple Watch から操作できるようにするまでの過程を記録する。

 参考記事下記の素晴らしい記事を参考にしよう。
https://zenn.dev/nir_takemi/articles/1de2888e222e6e

薄田達哉 / tatsuyasusukida

 Flutter 側を準備する動作確認のための簡単なアプリを作ってみよう。
VS Code のコマンドパレットから Flutter: New Project を実行する。
テンプレートとしては Empty Application を選ぶ。
プロジェクト名は hello_apple_watch とした。

薄田達哉 / tatsuyasusukida

XCode での設定

コマンド

open ios/Runner.xcworkspace

よくわからないが Bundler Identifier をユニークっぽいものに変えてみた

薄田達哉 / tatsuyasusukida

 起動F5 で無事に起動した。
コマンドパレット的には Debug: Start Debugging のようだ。

薄田達哉 / tatsuyasusukida

flutter_hooks のインストール

コマンド

flutter pub add flutter_hooks

薄田達哉 / tatsuyasusukida

基本のカウンターアプリ

lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends HookWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    final counter = useState(0);

    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Count: ${counter.value}'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            counter.value += 1;
          },
          child: const Icon(Icons.plus_one),
        ),
      ),
    );
  }
}

薄田達哉 / tatsuyasusukida

 Apple Watch の初期化しばらく使っていない Apple Watch なのでパスワードすら忘れてしまった。
まずは初期化する方法を探そう。
https://support.apple.com/ja-jp/108348
これがサイドボタンだと思ってずっと Digital Crown を押してたが何もならなくてどうしようとなったが気が付けて良かった。

薄田達哉 / tatsuyasusukida

 iPhone のアップデートが必要かったるいが iOS 16.7.10 をダウンロードしてインストールしよう。
これで Flutter アプリが起動しなくなるようなことがありませんように。

薄田達哉 / tatsuyasusukida

 iPhone のアップデートが終わった1〜2 時間くらいかかった、今日はこれで終わりかな。
iPhone をアップデートしても Apple Watch の初期設定を進められなかった時は心が折れそうになったが、Apple Watch の i ボタンを押して言語設定を日本語に設定してから色々といじっていたらうまくいった。

薄田達哉 / tatsuyasusukida

 次にやること下記の記事などを参考にして flutter_watch_os_connectivity パッケージを追加して設定してみるか。
https://noifuji.hateblo.jp/entry/2023/05/10/131451

薄田達哉 / tatsuyasusukida

flutter_watch_os_connectivity について

薄田達哉 / tatsuyasusukida

インストール

コマンド

flutter pub add flutter_watch_os_connectivity

薄田達哉 / tatsuyasusukida

Apple Watch からのメッセージ受信

lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_watch_os_connectivity/flutter_watch_os_connectivity.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends HookWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    final counter = useState(0);
    final flutterWatchOsConnectivity =
        useMemoized(() => FlutterWatchOsConnectivity());

    useEffect(() {
      flutterWatchOsConnectivity.configureAndActivateSession();
      final subscription =
          flutterWatchOsConnectivity.messageReceived.listen((message) {
        print(message.data);
      });

      return () => subscription.cancel();
    }, []);

    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Count: ${counter.value}'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            counter.value += 1;
          },
          child: const Icon(Icons.plus_one),
        ),
      ),
    );
  }
}

こんなので良いのだろうか？

薄田達哉 / tatsuyasusukida

 デベロッパーモードTo use 'iPhone' for development, enable Developer Mode in Settings → Privacy & Security.
iOS をアップデートしたからだろうか？
設定アプリのプライバシーとセキュリティからデベロッパーモードを ON にしたら解決したようだ。

薄田達哉 / tatsuyasusukida

 起動はするが真っ白一旦 useEffect をコメントアウトして起動してからコメントアウトを外したら起動するようになった。
なんかこういうの嫌だなー

薄田達哉 / tatsuyasusukida

警告メッセージを控えておく

Connecting to VM Service at ws://127.0.0.1:59256/LO74mpspiN8=/ws
[ERROR:flutter/shell/common/shell.cc(1055)] The 'sstonn/flutter_watch_os_connectivity_callback' channel sent a message from native to Flutter on a non-platform thread. Platform channel messages must be sent on the platform thread. Failure to do so may result in data loss or crashes, and must be fixed in the plugin or application code creating that channel.
See https://docs.flutter.dev/platform-integration/platform-channels#channels-and-platform-threading for more information.
[WC] Application context data is nil
2
[WC] WCSession counterpart app not installed
[WC] Application context data is nil

薄田達哉 / tatsuyasusukida

ウォッチアプリを作る

コマンド

open ios/Runner.xcworkspace

File > New > Target から watchOS App を追加する

Flutter 側が helloAppleWatch だったのでこちらは helloFlutterApp にしよう

helloFlutterApp Watch App が追加された、AppTests や AppUITests はテスト用のようだ

薄田達哉 / tatsuyasusukida

ボタンの追加

右上の「＋」アイコンをクリックするとコントロールの一覧が表示されるのでドラッグ＆ドロップ

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Button("Count up") {}
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

Count up ボタンが表示された

薄田達哉 / tatsuyasusukida

ChatGPT に聞いてみた

プロンプト

Apple Watch から Flutter アプリにメッセージを送信するプログラムの書き方を教えてください！下記まで書きました！

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Button("Count up") {}
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

ContentView.swift

import SwiftUI
import WatchConnectivity

class ConnectivityProvider: NSObject, WCSessionDelegate {
    static let shared = ConnectivityProvider()

    private override init() {
        super.init()
        if WCSession.isSupported() {
            WCSession.default.delegate = self
            WCSession.default.activate()
        }
    }

    func sendMessageToPhone(_ message: [String: Any]) {
        if WCSession.default.isReachable {
            WCSession.default.sendMessage(message, replyHandler: nil) { error in
                print("Error sending message: \(error.localizedDescription)")
            }
        }
    }

    // 必要に応じて他のデリゲートメソッドを実装できます。
    func session(_: WCSession, activationDidCompleteWith _: WCSessionActivationState, error _: Error?) {}
    func session(_: WCSession, didReceiveMessage message: [String : Any]) {
        print("Message received: \(message)")
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            Button("Count up") {
                ConnectivityProvider.shared.sendMessageToPhone(["action": "countUp"])
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

ios/Runner/AppDelegate.swift

import UIKit
import Flutter
import WatchConnectivity

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate, WCSessionDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        if WCSession.isSupported() {
            let session = WCSession.default
            session.delegate = self
            session.activate()
        }

        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }

    func session(_: WCSession, activationDidCompleteWith _: WCSessionActivationState, error _: Error?) {}

    func session(_: WCSession, didReceiveMessage message: [String: Any]) {
        if let action = message["action"] as? String {
            DispatchQueue.main.async {
                // Flutter との通信
                let flutterViewController = self.window?.rootViewController as! FlutterViewController
                let channel = FlutterMethodChannel(name: "com.example.watch", binaryMessenger: flutterViewController.binaryMessenger)
                channel.invokeMethod("watchMessage", arguments: action)
            }
        }
    }
}

lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const platform = MethodChannel('com.example.watch');
  String message = "No message received";

  @override
  void initState() {
    super.initState();
    platform.setMethodCallHandler((call) async {
      if (call.method == "watchMessage") {
        setState(() {
          message = "Received action: ${call.arguments}";
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Watch App')),
      body: Center(child: Text(message)),
    );
  }
}

薄田達哉 / tatsuyasusukida

Apple Watch 側のコード

ContentView.swift

import SwiftUI
import WatchConnectivity

struct ContentView: View {
    var body: some View {
        VStack {
            Button("Count up") {
                ConnectivityProvider.shared.sendMessageToPhone(["action": "countUp"])
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

class ConnectivityProvider: NSObject, WCSessionDelegate {
    static let shared = ConnectivityProvider()

    private override init() {
        super.init()
        if WCSession.isSupported() {
            WCSession.default.delegate = self
            WCSession.default.activate()
        }
    }
    
    func sendMessageToPhone(_ message: [String: Any]) {
        if WCSession.default.isReachable {
            WCSession.default.sendMessage(message, replyHandler: nil) { error in
                print("Error sending message: \(error.localizedDescription)")
            }
        }
    }

    func session(_ session: WCSession, activationDidCompleteWith activationState: WCSessionActivationState, error: Error?) {}
}

薄田達哉 / tatsuyasusukida

 ビルドの設定

Runner の General タブで Frameworks, Libraries, and Embedded Content セクションの + ボタンをクリックする

Watch アプリが表示されるので選択して追加する

Runner の General タブ Identity セクションで Bundle Identifier を確認する
このサンプルでは com.loremipsum.helloAppleWatch にしている。

この値を Watch App の WKCompanionAppBundleIdentifier に設定する

Watch App の Bundle Identifier が .watchkitapp になったが大丈夫なのだろうか？

薄田達哉 / tatsuyasusukida

実行できない

Apple Watch が古いからだろうか？

薄田達哉 / tatsuyasusukida

watchOS のバージョン確認

Apple Watch の設定アプリで一般 > 情報と移動したところ 9.6.3 のようだ。

薄田達哉 / tatsuyasusukida

Watch OS の Bundle ID

com.loremipsum.helloAppleWatch.watchkitapp のようにする必要があるかも知れない。

薄田達哉 / tatsuyasusukida

シミュレーターでは起動した

これは実機とは通信できるのだろうか？

薄田達哉 / tatsuyasusukida

VS Code から Flutter デバッグを開始できない

DEBUG CONSOLE

Launching lib/main.dart on iPhone in debug mode...
Automatically signing iOS for device deployment using specified development team in Xcode project: Z8PWHVS69Q
Watch companion app found.
Xcode build done.                                            9.1s
Failed to build iOS app
Could not build the precompiled application for the device.
Error (Xcode): Cycle inside Runner; building could produce unreliable results.
Cycle details:
→ Target 'Runner': ExtractAppIntentsMetadata
○ Target 'Runner' has copy command from '/Users/susukida/workspace/hello_apple_watch/build/ios/Debug-watchos/helloFlutterApp Watch App.app' to '/Users/susukida/workspace/hello_apple_watch/build/ios/Debug-iphoneos/Runner.app/Watch/helloFlutterApp Watch App.app'
○ That command depends on command in Target 'Runner': script phase “Thin Binary”
○ Target 'Runner' has process command with output '/Users/susukida/workspace/hello_apple_watch/build/ios/Debug-iphoneos/Runner.app/Info.plist'
○ Target 'Runner' has copy command from '/Users/susukida/workspace/hello_apple_watch/build/ios/Debug-watchos/helloFlutterApp Watch App.app' to '/Users/susukida/workspace/hello_apple_watch/build/ios/Debug-iphoneos/Runner.app/Watch/helloFlutterApp Watch App.app'

Raw dependency cycle trace:

target:  ->

node: <all> ->

command: <all> ->

node: /Users/susukida/Library/Developer/Xcode/DerivedData/Runner-fwtgxsefujmgskczzkkmufjxktjk/Build/Intermediates.noindex/Runner.build/Debug-iphoneos/Runner.build/Objects-normal/arm64/ExtractedAppShortcutsMetadata.stringsdata ->

command: P0:target-Runner-18c1723432283e0cc55f10a6dcfd9e0288a783a885d8b0b3beb2e9f90bde3f49-:Debug:ExtractAppIntentsMetadata ->

node: <target-Runner-18c1723432283e0cc55f10a6dcfd9e0288a783a885d8b0b3beb2e9f90bde3f49--fused-phase6-copy-files> ->

command: P0:::Gate target-Runner-18c1723432283e0cc55f10a6dcfd9e0288a783a885d8b0b3beb2e9f90bde3f49--fused-phase6-copy-files ->

node: <Copy /Users/susukida/workspace/hello_apple_watch/build/ios/Debug-iphoneos/Runner.app/Watch/helloFlutterApp Watch App.app> ->

CYCLE POINT ->

command: P0:target-Runner-18c1723432283e0cc55f10a6dcfd9e0288a783a885d8b0b3beb2e9f90bde3f49-:Debug:Copy /Users/susukida/workspace/hello_apple_watch/build/ios/Debug-iphoneos/Runner.app/Watch/helloFlutterApp Watch App.app /Users/susukida/workspace/hello_apple_watch/build/ios/Debug-watchos/helloFlutterApp Watch App.app ->

node: <target-Runner-18c1723432283e0cc55f10a6dcfd9e0288a783a885d8b0b3beb2e9f90bde3f49--fused-phase5--cp--embed-pods-frameworks> ->

command: P0:::Gate target-Runner-18c1723432283e0cc55f10a6dcfd9e0288a783a885d8b0b3beb2e9f90bde3f49--fused-phase5--cp--embed-pods-frameworks ->

node: <target-Runner-18c1723432283e0cc55f10a6dcfd9e0288a783a885d8b0b3beb2e9f90bde3f49--fused-phase4-thin-binary> ->

command: P0:::Gate target-Runner-18c1723432283e0cc55f10a6dcfd9e0288a783a885d8b0b3beb2e9f90bde3f49--fused-phase4-thin-binary ->

node: <execute-shell-script-18c1723432283e0cc55f10a6dcfd9e02f1eee2015e8ff5ebcd27678f788c2826-target-Runner-18c1723432283e0cc55f10a6dcfd9e0288a783a885d8b0b3beb2e9f90bde3f49-> ->

command: P2:target-Runner-18c1723432283e0cc55f10a6dcfd9e0288a783a885d8b0b3beb2e9f90bde3f49-:Debug:PhaseScriptExecution Thin Binary /Users/susukida/Library/Developer/Xcode/DerivedData/Runner-fwtgxsefujmgskczzkkmufjxktjk/Build/Intermediates.noindex/Runner.build/Debug-iphoneos/Runner.build/Script-3B06AD1E1E4923F5004D2608.sh ->

node: /Users/susukida/workspace/hello_apple_watch/build/ios/Debug-iphoneos/Runner.app/Info.plist/ ->

directoryTreeSignature: Z ->

directoryContents: /Users/susukida/workspace/hello_apple_watch/build/ios/Debug-iphoneos/Runner.app/Info.plist ->

node: /Users/susukida/workspace/hello_apple_watch/build/ios/Debug-iphoneos/Runner.app/Info.plist ->

command: P0:target-Runner-18c1723432283e0cc55f10a6dcfd9e0288a783a885d8b0b3beb2e9f90bde3f49-:Debug:ProcessInfoPlistFile /Users/susukida/workspace/hello_apple_watch/build/ios/Debug-iphoneos/Runner.app/Info.plist /Users/susukida/workspace/hello_apple_watch/ios/Runner/Info.plist ->

node: /Users/susukida/workspace/hello_apple_watch/build/ios/Debug-iphoneos/Runner.app/Watch/helloFlutterApp Watch App.app ->

command: P0:target-Runner-18c1723432283e0cc55f10a6dcfd9e0288a783a885d8b0b3beb2e9f90bde3f49-:Debug:Copy /Users/susukida/workspace/hello_apple_watch/build/ios/Debug-iphoneos/Runner.app/Watch/helloFlutterApp Watch App.app /Users/susukida/workspace/hello_apple_watch/build/ios/Debug-watchos/helloFlutterApp Watch App.app

Error launching application on iPhone.


Exited (1).

薄田達哉 / tatsuyasusukida

XCode でもビルド失敗

同じエラーメッセージのようだ。

薄田達哉 / tatsuyasusukida

参考になりそう

薄田達哉 / tatsuyasusukida

 現状の Build Phases

Embed Watch Content を Thin Binary よりも前に持っていこう
これで起動したら嬉しいなー

薄田達哉 / tatsuyasusukida

起動した

ありがとうインターネット、ありがとう Chat GPT。

薄田達哉 / tatsuyasusukida

Apple Watch にもデベロッパーモードがあるようだ

薄田達哉 / tatsuyasusukida

 色々やってたら起動できそうになったApple Watch を開発者モードにする
Deployment Target を 9.6 にする
iPhone からケーブルを抜いて差し直す


Deployment Target の設定

薄田達哉 / tatsuyasusukida

Apple Watch 実機で起動できた

この感動は忘れない。

薄田達哉 / tatsuyasusukida

つながっている

なんとまあ、素晴らしい。

薄田達哉 / tatsuyasusukida

Apple Watch からカウントアップできた！

lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_watch_os_connectivity/flutter_watch_os_connectivity.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends HookWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    final counter = useState(0);
    final flutterWatchOsConnectivity =
        useMemoized(() => FlutterWatchOsConnectivity());

    useEffect(() {
      flutterWatchOsConnectivity.configureAndActivateSession();
      final subscription =
          flutterWatchOsConnectivity.messageReceived.listen((message) {
        if (message.data.containsKey('action')) {
          if (message.data['action'] == "countUp") {
            counter.value += 1;
          }
        }
      });

      return () => subscription.cancel();
    }, []);

    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Count: ${counter.value}'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            counter.value += 1;
          },
          child: const Icon(Icons.plus_one),
        ),
      ),
    );
  }
}

薄田達哉 / tatsuyasusukida

変更が反映されないのはちょっと気になる

手動でリロードすれば大丈夫なのでまあ良いか。

薄田達哉 / tatsuyasusukida

 スムーズに進んだ初めての試みだったので色々と難航するかと思っていたが意外とスムーズに進んだ。
まだわからないことだらけだがとりあえず動くものができて良かった。
一旦スクラップはクローズしてまた何かでつまづいたら追記していくことにしよう。

このスクラップは3ヶ月前にクローズされました