Zenn
🥫

Apple シリコン搭載 Mac なら iOS 向け SDK を macOS で動かせる ~ Flutter を添えて ~

2023/04/16に公開
Flutter
iOS
macOS
Google
M1
tech

はじめに

Apple Silicon 搭載の Mac では iOS アプリを動かすことができますが、Flutter アプリも例外ではないはずです。

試してみましょう。

Xcode でアプリを起動

Xcode からアプリを起動し、アタッチしていきます。

My Mac (Designed for iPad)になっているのを確認して Run します。

になっているのを確認してRunしましょう

いつものカウンターアプリが起動します。
いつものカウンターアプリ

Xcode のコンソールに アタッチに必要な URL が出力されるのでこちらをコピーしましょう。

XcodeのコンソールにURLがある

VS Code の場合

Flutter: Attach to Flutter on Deviceコマンドでアタッチできます。

参考: Debugging your add-to-app module | Flutter

または、.vscode/launch.jsonに次のように追記しましょう。

.vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "attach",
      "request": "attach",
      "type": "dart",
      "args": ["--app-id", "dev.kingu.iosAppRunOnMac"]
    }
  ]
}

argsで--app-idの指定は必須ではありませんが、attachを何度も実行していると次のようなエラーが出ることがあります。

There are multiple observatory ports available.
Rerun this command with one of the following passed in as the appId:

  flutter attach --app-id dev.kingu.iosAppRunOnMac
  flutter attach --app-id dev.kingu.iosAppRunOnMac (2)

アプリを一旦 kill すれば回避できますが、面倒なので--app-idを指定しておくと楽です。

Hot reload も問題ありません

primarySwatchを変えてHot reload

では本題です

つまり、iOS アプリを macOS で実行できるので、iOS しか対応していない SDK を macOS で使えるようになります。

Google マップで屋内地図を表示したい場合、ブラウザからアクセスすれば表示することができるのはご存知かと思います。
例えば東京駅の地下 1 階 - https://goo.gl/maps/PSokGrc6hKb7NouR7

一方で屋内地図をなんらかのアプリに組み込んで利用したい場合は SDK が必要です。
これは iOS や Android ではGoogle Maps SDK を利用することで実現できますが、PC では利用できません。

PC ではMaps JavaScript APIの利用が想定されているのだと思いますが、残念なことに屋内地図は対応していません。
（Google Maps SDK で屋内地図が利用できるようになって少なくとも 5 年以上は経ったと思いますが、未だに JS 版では利用できないです...）

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: GoogleMap(
          initialCameraPosition: CameraPosition(
            target: LatLng(35.68123837837174, 139.76700609632644), // 東京駅
            zoom: 21,
          ),
          indoorViewEnabled: true,
        ),
      ),
    );
  }
}

東京駅の地下1階の地図

なんということでしょう。
macOS アプリで屋内地図が表示できました。
（レポジトリはこちら）

まとめ

Flutter で作った iOS アプリを macOS で実行できることが確認できました。
これにより、(全てではないでしょうが)iOS 向けの SDK を macOS で利用できるようになりました。

GitHubで編集を提案

Discussion