M1 Mac(またはM2)などAppleシリコンのMacを使用している方向けのFlutter環境構築の手順を解説して行きます。
本記事ではFlutter SDKのインストールからAndroid Studioを使用してFlutterアプリを起動させるまでの一通りの手順を紹介して行きます。
Rosettaのインストール
AppleシリコンのMacでFlutterの環境構築を行う際に「Rosetta」のインストールが必要となります。
ターミナルを開いて次のコマンドを実行してRosettaをインストールします。
$ sudo softwareupdate --install-rosetta --agree-to-licenseFlutter SDKのインストール
まずはFlutter公式サイトの「Install」からmacOSを選択します。
「Get the Flutter SDK」から使用しているmacOSのSDKをダウンロードします。
Flutter SDKを解凍し配置
ターミナルを開いて次のコマンドを順に実行します。
3行目のコマンドはFlutter公式サイトで指示されているバージョンを使用すれば大丈夫です。
$ mkdir ~/development
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_3.13.0-stable.zip
パスを通す
Flutter SDKをインストールしたらパスを通して行きます。
まずはターミナルで次のコマンドを実行して使用しているシェルを確認します。（シェルによって異なる作業を行います）
$ echo $SHELLコマンドを実行して/bin/zshと返ってきたら「zsh」、/bin/bashと返ってきたら「bash」となります。
シェルを確認したら、使用しているシェルに応じて次のコマンドを実行します。
//zshの場合
$ vim .zshrc
//bashの場合
$ vim .bash_profileするとVimと呼ばれるエディタが起動されるので、キーボードで「i」を推してINSERTモードに切り替え、次のようにFlutter SDKのパスを渡します。
$ export PATH="$PATH:/[flutterフォルダまでのパス]/flutter/bin"
パスの入力が完了したら:wqを推してVimエディタを終了し、ターミナルを一度閉じます。
ターミナルを再起動したら次のコマンドを実行してパスが通っているか確認します。パスが通っている場合は先ほどVimエディタで入力したパスが返ってきます。
$ which flutterXcodeのインストール
Appleストアで「Xcode」と検索しアプリをダウンロードします。
ダウンロードが完了したら次のコマンドを順に実行します。
3行目のコマンドを実行すると利用規約が表示されるので「スペース」を押しながら最後まで読み進め最後に「agree」とコマンドを入力し実行します。
$ sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch
$ sudo xcodebuild -licenseXcodeアプリを開き次の画面が表示されればインストール完了です。
最後にターミナルで次のコマンドを実行してiOSシミュレーターを起動できるか確認しておきましょう。
$ open -a Simulator問題がなければ次のようにiOSシミュレーターが起動されます。
CocoaPodsのインストール
Flutterでアプリ開発をしていく上で様々なプラグインを使用する際にCocoaPodsが必要となるので予めインストールしておきます。
$ sudo gem uninstall ffi && sudo gem install ffi -- --enable-libffi-alloc
$ sudo gem install cocoapodsAndroid Studioのインストール
Android Studio公式サイトを開き「Download Android Studio」をクリック。
利用規約にチェックを入れて、使用しているMacのAndroid Studioをダウンロードします。
ダウンロードしたファイルを開き「Android Studio」を「Applications」にドラッグ&ドロップします。
ダウンロードが完了したら「Applications」から「Android Studio」を起動し案内に従って指示にインストールして行きます。
Android Studioのインストールが完了したら再起動し、ホーム画面の「Plugins」をクリック。
検索ボックスから「Flutter」、「Dart」を検索しインストールします。
インストールが完了したらAndroid Studioを再起動します。
すると「New Flutter Project」が追加されています。
「More Actions」から「SDK Manager」を開きます。
「Android SDK」＞「SDK Tools」の「Android SDK Command-line Tools (latest)」にチェックをいれ「Apply」をクリック。
最後にターミナルで次のコマンドを実行すればAndroid Studioのセットアップは完了です。
$ flutter doctor --android-licensesFlutterプロジェクトの作成
Android Studioを起動し「New Flutter Project」をクリックします。
「Flutter」を選択し「Flutter SDK path」があっている確認し「Next」をクリック。
「Project name」でFlutterアプリのプロジェクト名、「Platforms」でアプリ開発をプラットフォームを選択し「Next」をクリック。
これでFlutterプロジェクトが作成されます。
Androidエミュレーターのセットアップ
Android Studioの右上にある「Device Manager」から「Create Device」をクリックします。
「Select Hardware」でFlutterアプリを起動させるために使用するデバイスを選択し「Next」をクリック。（今回は「Pixel 6」を使用）。
「System Image」で「Next」を選択。
「Next」ボタンが非活性の場合はデバイスに必要なものをダウンロードします。
「Android Virtual Device」で「Finish」を選択します。
すると「Device Manger」にデバイスが追加されているので実行を選択。
しばらくするとAndroidエミュレーターが起動されます。
Flutterアプリを起動させるにはデバッグボタンをクリックします。
これでAndroid StudioによるFlutter環境構築は完了です。