はじめに
- エンジニア半年の備忘録
- Macbook Air M2
- 今更flutter
やりたいこと
- iosモバイルアプリケーションを作りたい
- けどiosアプリのデプロイには金がかかるのでAndroidでスモールデプロイしていきたい
- flutterの環境構築をしたい
- Android studioでflutterアプリを作っていけるようにしたい
環境構築
1. Flutter SDKをダウンロード
Apple silicon用のSDKがあるのでそれをダウンロード、解凍する。
2. 管理フォルダを作ってhomeディレクトリに置く
どこのディレクトリでも問題ないですが、管理しやすいようにdevelopmentフォルダを作成して構築を行います。
フォルダを作成したら直下に解凍したflutterフォルダを設置しましょう
3. パスを通す
> touch .zshrc
.zshrcファイルを作成（最初からある可能性もあるので気をつけて）
.zshrcファイルに以下を追記します。
export PATH="$PATH:[flutterフォルダまでのパス]/bin"
// 私の場合
export PATH="$PATH:/Users/kento/development/flutter/bin"
確認してみましょう
> which flutter
パスが表示されていればflutterの構築完了です。
4. flutter doctorの実行
> flutter doctor
実行してみましょう。
gitが入っていない場合は自動的に導入してくれます
現時点ではこんな感じになってると思います。
もし、”Bad CPU type in executable” と表示されたらこれを参考にしてください。
これより、今バツマークが付いてるAndroidとiosの開発環境を構築していきます。
5. iosアプリケーション開発環境のセットアップ
Apple StoreでXcodeと検索してインストールします。（時間かかります）
待ち時間にCocoaPodsを入れておきましょう（色んなライブラリに必須になります）
> brew install cocoapods
> pod setup
Setup completedって出たら成功です。
6. androidアプリケーション開発環境のセットアップ
Xcodeはインストールにもクソ時間がかかります。
待ち時間に以下を進めておきましょう
公式のページど真ん中のインストールボタンから、「Mac with Apple chip」を選択します。
インストールを進めていきます。
過去にインストールしている場合はその時のConfigを適応することもできます
Nextをクリック
今回はStandardを選択
好きな方を選択
Next
android-sdk-licenseとandroid-sdk-arm-dbt-licenseの規約を見てAcceptを選択
ダウンロードが始まります。ちょっと待ちましょう
ここまできたらandroid studioのインストールは終了です！
続いて、flutter用のプラグインを導入します。
左の項目からPlugins → Flutter → install
Dartのpluginが入っていない場合は入れましょう
インストールが終わったら再起動を求められるのでIDEを再起動します。
再起動して、New Flutter Project の項目が出ていれば完成です！！！
試しに、flutterのプロジェクトを作ってみましょう
先ほどのNew flutter Project → flutter → next
ここでproject nameや説明、ファイルパス、Organization、使用言語、プラットフォームなどを設定できます。
今回は初期設定で行きます
左側のタブから「Project」を選択
基本的にここで開発を行う形になります
7. 各シュミレータ, エミュレータ起動方法
iOSシュミレータを起動してみましょう
真ん中のタブ → Open iOS Simulatorを選択
左の起動しているデバイスがあるのを確認して、再生ボタンをクリック
少し待つとシュミレータが起動し、開発したios appを実際に使うことができます。
（私の環境ではちょっと重かった）
Xcodeのエラーが出る場合は、Xcodeでの利用規約を確認していない可能性があります。
初回起動をしてAgreeを押しておきましょう。
続いて、Androidエミュレータを起動してみましょう。
今回はiOS開発環境しか使用しないので簡単にまとめます。
Device Managerを開きます。
Create Deviceから開発したいサイズのハードを選択します。
システムイメージを選択（今回はやりません）
ダウンロードが完了したら以下のようになるので、エミュレータを以下のボタンからスタート
iOSシュミレータと同じように再生ボタンを押すことで実行ができます。
長い環境構築お疲れ様でした！
エラーに対する備忘録
> flutter doctor
で最終的な確認をしておきましょう。
あれ…? Android関連のエラーが出てる…?
**cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.**
これは必要なSDKが無いため出るエラーとなります。
Android studioを起動 → More Actions → SDK Manager
Android SDK → SDK Tools → Android SDK Command-line Toolsを導入
これで、cmdline-tools component is missingは消えたはずです。
次は、
Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
が出てきた…ライセンス関連？
> flutter doctor --android-licenses
を実行してライセンスを確認しましょう。
よくわからんけどy押しまくってヨシ！！！
再度flutter doctorを実行するとNo issues found!となっていました。お疲れ様でした！！！
参考
↓Appleシリコン用環境構築方法
