【Flutter入門】インストール&セットアップ方法|macOS

Flutter Flutter
スポンサーリンク

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 StudioCocoaPodsのインストールが必要なようですね。

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 more

Android 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を使ってアプリ開発を進めていきましょう!

コメント

タイトルとURLをコピーしました