概要
FlutterはReact Nativeと同じように一つの言語でiOSとアンドロイドアプリ、両方を開発することができるクロスプラットフォームモバイルアプリ開発プラットフォームです。最近ウェブまで拡張してどんどん対応OSを拡大しております。
- Flutter: 公式サイト
今回のブログポストではマックへ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: Web
- Xcode: Mac App Store
上のリンクを使って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で開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
