Flutterアプリ開発[環境構築編][Mac版][M1対応]

今回の記事ではFlutterアプリ開発の環境構築を行っていこうと思います。

はじめに

はじめましてクラウドソリューショングループのkato.shunです。

この記事は完全初心者向けFlutterアプリ開発シリーズの第一弾です。

シリーズ全体のゴールは、読み終わった方が自分でアプリを作り始められるようになっていることです。

今の所の予定では以下のようなシリーズ構成で考えています。

• 環境構築編　←今ココ
• RTC編
• Firebase Hosting編
• Firebase Authentication編
• Cloud Firestore編
• CICDパイプライン構築編
• アーキテクチャ洗練編

第一弾の今回は環境構築が終わるところを目標にやっていきます！

対象とするOSはmacOSとなります(また、M1チップにも対応しています)。(Windowsは非対応です)

目次

1. 環境構築の準備
2. iOS用の準備
3. SDKの準備
4. Android用の準備

環境構築の準備

これから環境構築をすすめるにあたり、環境構築をするための準備を行っていきます。

流れは

1. brewのインストール
2. gitのインストール

です。
この２つが入っていることがわかっている方は、この章を飛ばしてiOS用の準備の章から始めてください。

コマンドを打つ方法がわからない方は

ターミナルというコマンドを打ち込んでmacを動かすためのツールがあるのでそれを立ち上げます。
commandとspaceを同時押しして出てきたspotlight検索で「terminal」と打ち込むと起動できます。
その黒い画面に文字列を打ち込んでEnterキーを押すとコマンドが実行できます。

Homebrewのインストール

Homebrewが入っているかわからない方は

以下のコマンドをターミナルに打ってください。

1	brew --version

これでhomebrewのバージョンが帰ってきたらOKです！
errorになっていたらインストールが必要です。

以下のコマンドを打ってHomebrewをインストールしてください。

gitのインストール

以下のコードをターミナルに打ち込んでください。

以上で環境構築の準備は終了です。

iOS用の準備

この章ではFlutterで作ったアプリをiOSで動かすための準備を行っていきます。

xcodeのインストール

xcodeが入ってるか確認

入っていなかったらインストールしてください(信じられないほど長時間かかります)

ここでライセンス情報がずらずらと出てきます。
spaceかenterで読み進めagreeと入力してください(qを押すと閉じてしまうので注意)

次は以下のコマンドを打ち込んで追加のコンポーネントやジェムのインストールをします。

以上でiOS用の準備は終了です。

SDKの準備

この章では各種SDKをまとめてインストールします。

JavaのSDKをインストール

FlutterのSDKのインストール

こちらのページからFlutterインストール用のzipファイルをダウンロードしてください。

その後、~/developmentディレクトリにFlutterのSDKを配置してみましょう。

terminalを開いて

そんなファイルがないというエラーが起きた場合

ダウンロードしたzipファイルを自動で解凍する設定になっている方もいるようです。
その場合は最後のunzipコマンドがエラーになるので代わりに

1	cp -r ~/Downloads/flutter ~/development/

こちらでフォルダごとコピーしてしまいましょう。

配置完了です。

次にpathを通します。

最近のmacは標準でzshを使っているようです。

現在のshellがなにかわからない方は

ターミナルに

1	echo $SHELL

と打って

1

/bin/zsh

が表示されればOK

bin/bashが表示された場合はこちらの記事を参考にするか、

1	chsh -s /bin/zsh

こちらをterminalに打ってシェルを切り替えてください

zshを使っていることが確認できたら

こちらでパスが通ります。（もしかしたらterminalを再起動する必要がある人もいるかも知れません。）
パスが通っているかは

と打って先ほど設定したPATHが表示されていればOKです。
以上でSDKの準備は終了です。

Android用の準備

この章では作成したアプリをAndroid上で動かすための準備をします。

Android Studioのインストール

brewを使ってAndroid Studioのインストールをします。
Androidのdevelopersサイトから最新のAndroid Studioをインストールします。
この際にM1をご使用の方はライセンス同意後Mac with Apple chipと書いてある方を選択してください。Intel版の方はMac with Intel chipと書いてある方を選択してください。

インストールが開始します。完了したら、Android Studioを立ち上げます

権限がないよというエラーが出た方は

人によってはここでAndroid Studioがファイルを作る権限がないよというエラーが出ることがあるようです。
その場合は

1	sudo chmod 777 ~/Library/Application\ Support/Google

こちらのコマンドを打ってパスワードを入力して、再度Android Studioを立ち上げてください。
chmodによるパーミッション設定については必要に応じて絞ってください。

立ち上げると自動でインストールの準備が始まります。

InstallTypeはStandardを選択してください。
その後はNextボタンを押し続け、最後にfinishボタンを押してください
インストールが始まります。
終わったら再度finishを押してください

Android Studioからプラグインをインストール

インストールが完了すると以下のようなウインドウが現れると思います。

現れたwindowのpluginタブを開いてください
検索窓にFlutterと打って出てきたFlutterのプラグインをインストールしてください
警告でdartのプラグインもインストールするように促されるとおもうので、dartもインストールしてください

Android Studioのcommand line toolsをインストール

再度、初期画面に戻ってくると思うので今度はcustomizeタブを開いてください。

こちらの画面の一番下にAll settingsというボタンがあるので押してください。

ウインドウが現れるので検索窓にSDKと打ち込んでください。

すると以下のような画面に切り替わると思います。

画面中央部にあるSDK Toolsをクリックしてください。
Android SDK Command-line Tools(latest)のチェックボックスをつけてApplyボタンを押してください。
ライセンス同意をしてNextを押してください。

あとはインストールが始まるので言われるままに進めばコマンドラインツールがインストールできます。

Androidのライセンス認証

次にAndroidのライセンスを認証します。

をターミナルで打ってその後はひたすらyを押してライセンスに同意していきます。

ここまでできたら最後に

ですべての項目がクリアされていることを確認してください。

全ての項目にチェックマークがついていればFlutterの環境構築終了です。

JavaのSDKが見つからないと言われた方は

1 2	[✗] Android toolchain - develop for Android devices ✗ Unable to locate JAVA SDK.

このような表示が出てくる場合もあるかもしれません。
その時は

javaのSDKはインストールしたし、java –versionでも正しくバージョンが表示されているのでおかしいなと思っていたのですが、Android Studioの最近のバージョン(arcteric fox)で起こるエラーだったようです。

ここを参考に

terminalに移動して

1 2 3 4

cd /Applications/Android\ Studio.app/Contents/jre ln -s ../jre jdk ln -s "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin" jdk flutter doctor -v

このコマンドで解決します。

以上で本記事は終了です。
今回は環境構築まででしたが、次回以降の記事ではFirebaseと組み合わせたバックエンド開発や、各種機能を実装していきます。
ぜひお楽しみに。