[MacOS] Flutterのインストール

2021-03-28 hit count image

MacOSへFlutterをインストールする方法を説明します。

概要

FlutterはReact Nativeと同じように一つの言語でiOSとアンドロイドアプリ、両方を開発することができるクロスプラットフォームモバイルアプリ開発プラットフォームです。最近ウェブまで拡張してどんどん対応OSを拡大しております。

今回のブログポストではマックへFlutterでアプリを開発するため、Flutterをマックへインストールする方法について調べます。他のOSへFlutterをインストールする方法は公式サイトを参考してください。

VScode

私はFlutterを開発する時、VSCodeを使っています。もし他のツールを使ってない場合は、VSCodeを使うことをおすすめします。下記のコマンドを実行してVSCodeをインストールします。

brew cask install visual-studio-code
sudo xattr -dr com.apple.quarantine /Applications/Visual\ Studio\ Code.app

そして下記のコマンドを実行してFlutter開発に必要なExtensionをインストールします。

code --install-extension dart-code.flutter

Xcode

Flutterはクロスプラットフォームアプリ開発プラットフォームなのでiOSのアプリを開発することができます。iOSアプリを開発する時にはiOSのシミュレーターを使いますし、リリースするときはXcodeを使います。したがって、Flutterでアプリを開発する場合もXcodeはインストールする必要があります。

上のリンクを使ってXcodeをインストールした後、下記のコマンドを実行してXcodeを設定します。

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
sudo xcodebuild -license
sudo gem install cocoapods

Android Studio

iOSと同じようにFlutterではアンドロイドのアプリを開発することができます。しかし、アンドロイドのエミュレーターを使う時、アプリをデプロイするためにはAndroid Studioが必要です。

次のリンクを使ってAndroid Studioをダンロードして、インストールします。

Flutter SDK インストール

Flutterでアプリを開発するため、FlutterのSDKをインストールする必要があります。まず、下記のコマンドを使ってFlutter SDKをダウンロードするフォルダを生成します。

mkdir ~/development
cd ~/development

このようにFlutter SDKをダウンロードするフォルダを生成したら、下記のコマンドを使ってFlutter SDKをCloneします。

git clone https://github.com/flutter/flutter.git -b stable

また、次のコマンドを使ってウェブを通じてデプロイされたFlutter SDKをダウンロードができます。

curl -O https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_2.0.3-stable.zip
unzip flutter_macos_2.0.3-stable.zip

パスの設定

Flutter SDKを使うためにはFlutter SDKのパスを設定する必要があります。次のコマンドを使ってパスを追加するためファイルを修正します。

code ~/.zshrc

そして当該ファイルの一番下に次の内容を追加します。

...
export PATH=$HOME/development/flutter/bin:$PATH

依存性のインストール

まずFlutterでアプリを開発するため、必要なSDKやToolをインストールする必要があります。次のコマンドを実行してFlutterでアプリを開発するため必要なものをインストールします。

flutter doctor

Flutter SDKをgit cloneでコピーした場合はSDKをビルドするので、結構時間がかかります。SDKをウェブでダウンロードした場合はビルドの内容も含まれてるので、少し早く進めます。

実行が終わったら下記のような結果がみれます。

[✓] Flutter (Channel stable, 2.0.3, on macOS 11.2.3 20D91 darwin-x64, locale en)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.6)
[✓] VS Code (version 1.54.2)
[✓] Connected device (1 available)

私はAndroid toolchainが失敗しました。失敗メッセージで表示されたコマンドを実行してAndroid toolchainを設定します。

flutter doctor --android-licenses

そして、またflutter doctorを実行すると下記のように全てのものがうまくインストールされたことが確認できます。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.3, on macOS 11.2.3 20D91 darwin-x64, locale en)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.6)
[✓] VS Code (version 1.54.2)
[✓] Connected device (1 available)

このようにflutter doctorはFlutterでアプリ開発に必要なSDKやツールをインストールしてくれます。

確認

このように全てのもののインストールが終わったら、Flutterアプリを生成してみて、アプリがうまく実行されるか確認してみましょう。次のコマンドを実行してFlutterで開発するアプリを生成します。

flutter create my_app

そしてアンドロイドのエミュレーターまたはiOSのシミュレーターを実行して次のコマンドを使って生成したアプリを実行します。

cd my_app
flutter run

iOSのシミュレーターは下記のコマンドで実行できます。

open -a Simulator

下記のコマンドでアンドロイドエミュレーターを実行することができます。

emulator -list-avds
emulator -avd @name-of-your-emulator

完了

これでFlutterでアプリを開発する準備ができました。次はDartを勉強してFlutterのアプリを開発してみましょう。

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

アプリ広報

今見てるブログを作成たDekuが開発したアプリを使ってみてください。
Dekuが開発したアプリはFlutterで開発されています。

興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。

Posts