macOSでFlutterでの開発を行うための環境構築手順を解説します。
環境構築までに少し根気が入りますが、Flutterでアプリを開発するために頑張りましょう！
Flutterのインストール方法
1. Flutter SDKのダウンロード
Flutterの公式ページより、Flutterのインストールをします。
公式ページ：https://flutter.dev/docs/get-started/install/macos
2. ダウンロードしたzipを解凍
ターミナルで作業ディレクトリへ移動して、zipを解凍します。
作業ディレクトリは好きな場所に作成してください。
cd 作業ディレクトリのパス
unzip ~/Downloads/flutter_macos_2.2.2-stable.zip※zipファイルの名称は自身でダウンロードしたものを指定してください
3. PATHを通す
“.zshrc”に以下のコマンドを追記します。
‘pwd’の部分は、Flutterを解凍した作業ディレクトリのpathに置き換えてください。
export PATH="$PATH:`pwd`/flutter/bin"open ~/.zshrc で”.zshrc”をテキストエディタで開けます。
コマンドを追記したら、通したPATHを反映させましょう。
source ~/.zshrc
これで、Flutterのインストールは完了です。
Flutterのセットアップ方法
1. flutter doctorで必要なものをチェック
Flutterには、実行するために必要なものを教えてくれるコマンドがあります。
flutter doctor足りないものや問題があると[✗]や[!]で教えてくれます
私の環境の場合、Android StudioとCocoaPodsのインストールが必要なようですね。
2. 実行に必要なものを準備する
✔︎Android Studioのインストール
公式サイトからAndroid Studioをダウンロードします。
公式サイト：https://developer.android.com/studio/index.html
ダウンロードが完了したら、クリックしてApplicationsに追加します。
Android Studioを起動すると、初期セットアップが行われます。
M1チップのmacOSでセットアップをするとIntel HAXMがインストールできないと警告が出ますが、Finishをクリックしましょう。
✔︎ライセンスを許可する
このままだと、✗ Android license status unknown.になりますので、ライセンスの許可を行います。
flutter doctor --android-licenses許可するか聞かれるのでy(yes)を入力します。
このようなエラーが出てうまくいかない場合は、Android Studioの設定をいじる必要があります。
% flutter doctor --android-licenses
Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:73)
at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:48)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:636)
at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:182)
at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:519)
... 5 moreAndroid Studio > Configure > SDK Managerを開きます。
SDK ToolsタブにあるHide Obsolete Packagesのチェックを外して、Android SDK Command-line Tools (latest)とAndroid SDK Tools (Obsolete)にチェックを入れます。
再度”flutter doctor –android-licenses”を実行してうまくいけばOKです。
✔︎Xcodeのインストール
XcodeはAppStoreからインストールできます。
ネット回線の状況によってはインストールに1時間以上かかります…（体験談）
✔︎CocoPadsのインストール
iOSとmacOSでプラグインを機能させるために、CocoPadsのインストールも必要です。
sudo gem install cocoapodsこのコマンドでインストールできます。
✔︎VSCodeのインストール
公式ページからVSCodeをダウンロードします。
公式ページ：https://code.visualstudio.com/Download
ダウンロードファイルをクリックして、アプリをApplicationsに追加すればOKです。
3. flutter doctorで再度チェック
flutter doctorでもう一度チェックを行い、全て[✓]マークになっていればセットアップ完了です。
セットアップ完了
これで、インストールからセットアップまでおわりました。
Flutterを使ってアプリ開発を進めていきましょう！
コメント