ComposeMutiplatformでReadingEnglishFlashcardsアプリ作ってみた

Flutterの後続としてGoogleがアピールしているクロスプラットフォーム開発環境であるComposeMultiplatform。

まだα版やβ版が含まれるもののFlutter並に色んなプラットフォームに対応している。

GoogleGoogleの主要アプリをこのComposeMultiplatformに書き換えていくと宣言している。

ただ、FlutterはGoogleが開発元であるのに対し、ComposeMultiplatformはJetbrainが開発元であり開発元が異なる。

しかしGoogleの製品はベースがJetbrainの製品であることがよくあり、AndroidStudioのベースはJetbrainのIntelliJ IDEAだし、Androidの開発言語のKotlin自体開発元がJetbrainだ。

なので、Jetbrainが開発しているComposeMultiplatformは今後のGoogleの主要開発プラットフォームになっていく可能性は大いにある。

そこで今回このComposeMultiplatformを勉強してみた。

 

ComposeMultiplatformの開発環境を整える

まだComposeMultiplatformはAndroidStudioに標準では備わっていないのでプラグインをいれる形となる。

Pluginの検索画面で該当プラグインをインストールする。

そうすると「New Project」の画面にKotlin Multiplatform Appが表示されるので選ぶ。

そうすると基本的な構成が全て出来上がる。

Activityにはこのように書くと、MainScreen以降は全て共有部に記載できる。

MainScreen以降の画面遷移は自作する。
シーンIDを定義し、remenberとしておくと、このIDが変わると自動的に画面が再構成されるようになっている。

そのsceneIDに変化した時どうするかは以下のように実装する。

MenuScreenは以下のように実装した。Contextが必要なくAndroidAPIが必要ない。

これを実行するとこうなる。

まだActivityが最初に出てきたように、完全にワンコードでAndroid/iOSに出力されるわけではなさそう。ある程度のOS依存コードはある。特に最初の呼び出し口。
また、Activityを遷移させたい時はその部分を各ネイティブで実装するそうだ。

ただ逆に言えばネイティブコードが同じパッケージ内にあるかのように非常に簡単に呼び出せるのでネイティブ実装と合わせて実装するのがやり易い。

これで一つアプリを作ってみた。

play.google.com

次は、iOS/Androidの共通開発を意識してどのように共通化すべきなのか調べつつ、

Macを買ってiOSように出力して実行してみたい!