【Mac向け】Flutterの環境構築|SDKのインストール方法

今回はMacユーザー向けにAndroid Studioを使ってFlutterアプリ開発を行うための環境構築を行なっていきます。

Visual Studio Codeをエディタとしてアプリ開発を行いたい方もAndroid Studioが必要となります。

\ 世界最大級のオンライン学習サービス /

目次

Apple StoreでXcodeをインストール

まずはMac App StoreからXcodeをインストールします。

とりあえず今はインストールしておくだけで大丈夫です。Flutter SDKのインストールが完了した後でXcodeのセットアップを行います。

Flutter SDKのインストール

Flutter公式から「Flutter SDK」をインストールします。

Flutter公式を開いたら「Get started」をクリック。

今回はMacで環境構築を行うので「macOS」を選択。

自分が使用しているMacの「Flutter SDK」をインストールします。

画像ではIntelチップ向けのSDKをインストールしていますが、M1 Macを使用している方はAppleシリコンのSDKをインストールしてください。

次にFinderを開きHOME(ユーザー名)Developerを作ります。

先ほどインストールしたFlutter SDKのzipを開くと中にflutterが入っているのでDeveloperに移動させます。

パスを通す

パスを通すためにターミナルを開き自分が使用しているMacのシェルがzshbash確認します。

echo $SHELL

上記コマンドをターミナルで実行すると/bin/zshまたは/bin/bashが出力されます。前者の場合はzsh、後者の場合はbashが自分が使用しているMacのシェルです。

今回はシェルがzshの手順を紹介しますが、シェルがbashの場合は「zshbash」、「.zshrc>.bash_profile」として同じ作業をすればOKです。

touch .zshrc

まずはターミナルで上記コマンドを実行します。.zshrcが存在しない場合は新しく隠しファイルが生成されます。既にある場合は特に変化はありません。

Finderを開きショートカットキー「shift + command + .(ドット) 」を押すと隠しファイル(ドットから始まるファイル)が表示されるので、HOME(ユーザー名)にある.zshrcを開きます。

(もう一度ショートカットキー押すと隠しファイルは表示されなくなります)

export PATH="$PATH:パス"

.zshrcを開いたら上記コードをコピペし「パス」の部分にflutterにあるbinをドラッグします。またはbinのパスを手動でコピペします。

export PATH="$PATH:$HOME/Developer/flutter/bin"

今回の手順通りHOME(ユーザー名)Developerを作り、Flutter公式からインストールしたflutterDeveloperに移動させている場合は上記コードをコピペしてもOKです。

パスを追加したら.zshrcを閉じターミナルを再起動させます。

which flutter

上記コマンドをターミナルで実行するとパスが通っているか確認できます。

今回の指示通りフォルダの作成、保存を行なった場合は/Users/ユーザー名/Developer/flutter/bin/flutterとパスが出力されます。

これでFlutter SDKのインストールは完了です。

Xcodeのセットアップ

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

初めにインストールしたXcodeのセットアップを行います。

ターミナルで上記コマンドを順に実行します。またXcodeを初めて起動させるとライセンスの同意を求められるで許可します。

① sudo gem install cocoapods
② sudo gem uninstall ffi && sudo gem install ffi -- --enable-libffi-alloc

次にCocoaPodsを上記コマンドでインストールします。

Intelチップの場合は①、Appleシリコンの場合は②のコマンドを実行します。

open -a Simulator

ライセンスに同意したらターミナルで上記コマンドを実行し「iOS Simulator」が起動されればXcodeのセットアップは完了です。

Android Studioのセットアップ

Android Studio公式を開いたら「Download Android Studio」をクリック。

ボックスにチェックを入れ自分が使用しているMac向けのAndroid Studioをダウンロードします。

ダウンロードが完了したらインストール。

Android Studioを開いたら「Plugins」から「Flutter」をインストールします。Flutterのプラグインをインストールすると続いて「Dart」もインストールか聞かれるので一緒にインストールします。

念の為Dartもインストールされていることを確認します。

Android Studioのトップページで「New Flutter Project」と表示されればAndroid Studioのセットアップは完了です。

VSCodeでアプリ開発したい方はこちら

ここまで環境構築を行なった方でVSCodeでFlutterアプリ開発をしたい方は下記事をお読みください。

Android Studioで新規プロジェクト作成

Android Studioを開いたら「New Flutter Project」をクリック。

Flutter SDKのパスが正しければ「Next」をクリック。

which flutter

Flutter SDKのパスはターミナルで上記コマンドを実行して確認できます。

「Project name」でプロジェクト名、「Project location」で保存場所、「Description」でプロジェクト概要、「Project type」はApplicationを選択し「Organization」で企業ドメイン(個人なら名前など)を入力します。

「Android language」はKotlin、「iOS language」はSwiftで問題ないと思われます。「Platforms」で作成するアプリのプラットフォームを選択します。モバイルアプリを作るだけならAndroidとiOSにチェックを入れておけばOKです。

最後に「Finish」をクリックすればFlutterプロジェクトが作成されます。

これでFlutetrの環境構築は完了です。

一緒に読みたい

参考

  • URLをコピーしました!
目次