ITエンジニアを目指そう

自身が直面したインシデントの解決策を記録します。同様の現象で困った方の助けになれば幸いです。

(試行)FlutterとAndroid StudioでAndroid、ios両方で動くアプリを開発してリリースしたい。その1

【表題】(目標)FlutterとAndroid StudioAndroidios両方で動くアプリを開発してリリースしたい。その1

【日付】2023/09/15

【詳細】

Google PlayApple Store両方に公開できるまでが理想ですが、お金もかかるようなので、実機でテストできるまでが目標です。iosアプリはMACがないと難しいようですが、Codemagicとかいうのを使ったり、VM Wareを使ったりして実現したいと思います。

【環境構築】

試行錯誤でやったので、エラーが沢山出たので正しい順番ではないです。

 

Android studio (2023年9月だが、最新版は2022年3月版が最新?)

developer.android.com

 

②日本語化

(is not compatible with the current version of the IDE のようにAndroid Studioに取り込んだ時エラーがでるので、Android studioのリリース日に近い物をダウンロードすること。)

 

plugins.jetbrains.com

 

downloadしたファイルはzipのままでOK。

Android StudioからPlugins->右上の歯車->Install Plugin from Diskで取り込む。

->Restart IDE

 

③FlutterとDart

(Flutterを先にインストールしようとすると、Dartが必要ですと喚起してくれた)

④Flutter本体 Windows

zipで保存されるので、解凍して、Documentフォルダなど分かるところに移す。

docs.flutter.dev

 

 

Android studio【新規作成】

プロジェクト -> New Flutter Project -> Flutter -> 解凍後のPathを選択

 

Flutter本体をダウンロードしないままプロジェクト作ろうとすると、こうなる。

 

入れた後。Plat formsにiosも出てきた。

プロジェクトはできたが、Android API 29 Platformが見つかりません。

モジュール 'hoge'のDartサポートが有効かされていません。など怒られた。

構成押したら候補が、Dartも、有効化ボタンを押したら鎮まった。

 

サンプルプログラムがあるので、emulatorを起動しようとするが、

mobileはまったく動かない。Chromeにすると、8分ぐらいかけてブラウザが開き、一応は機能していることが確認できた。

 

⑥FlutterのPathを通す。

システム環境変数の編集

Flutter本体を置いた場所。

C:\Users\[ユーザ名]\Documets\flutter


次に、Path -> 編集 -> 新規で%FLUTTER_DIR%\binと入力し、OKを押す。

(写真では\が抜けてる)

再起動後にコマンドプロンプトで「flutter doctor」入力し

下記画面がでればパスの設定はOK。

Android toolchainをなんとかしていく。

ツール -> SDK Manager ->Android SDK -> SDK Tools -> Android SDK Command-line Tools(latest)とGoogle USB Driverをチェックして、OKを押してインストール

完了したら改めてコマンドプロンプトでflutter doctorするも、警告が出ている。

記載のとおり flutter doctor --android-licenses して y  とEnterを繰り返し押していけば

警告は消える🤪

 

⑧実機に入れて見る

シミュレーターをmobileにして、実行ボタンを押すと、

プロジェクトファイルの中にAPKファイルができるので、

何かしらの方法でAndroidスマホに入れる。

 

私はこれをPC版LINEからKeepメモでうつした。

 

 

このアプリあぶねーぞ、といろいろ警告でるけど無視してインストールすると、

Androidのデスクトップ画面に!!

 

開発がんばろう!

 

 

【余談】

Android studioのダウンロードをした途端、バッジを手に入れたと出ました。

こんなのはいらない。

 

【参考】

blog.css-net.co.jp

svpl.hatenablog.jp