はじめに

エンジニア半年の備忘録
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ファイルを作成（最初からある可能性もあるので気をつけて）

💡 ” ⌘ + Shift + . “を押して隠しファイルを表示させることができます。

.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シリコン用環境構築方法