はじめに
Mac を使用していることを前提とした記事なので,Windows をお使いの方は戻るボタンを押していただき別の記事をご覧ください.
手順はたった3ステップ.公式ドキュメントを参照しながら進めていきます.
さっそく環境構築を始めていきましょう!
Flutter のインストール
-
SDKをダウンロード
基本的にはStable 版の最新バージョンをダウンロード - Flutterの保存先ディレクトリを作成して,ダウンロードしたzipを解凍
※保存先場所は好きなところにディレクトリを作成してください.
$ mkdir /Users/(user name)/bin/flutter
$ cd /Users/(user name)/bin/flutter
$ unzip ~/Downloads/flutter_macos_2.0.2-stable.zip
パスを通す
- 使用しているシェルを調べる
$ echo $SHELL
- 使用してるシェルに応じてパスを設定する
// zshの場合
$ echo 'export PATH="$PATH:[PATH_TO_FLUTTER]/flutter/bin"' >> ~/.zshrc
$ source ~/.zshrc
// bashの場合
$ echo 'export PATH="$PATH:[PATH_TO_FLUTTER]/flutter/bin"' >> ~/.bash_profile
$ source ~/.bash_profile
// fishの場合
$ echo 'set -x PATH ~/bin/flutter/bin $PATH' >> ~/.config/fish/config.fish
- 新しいターミナルを開き下記を実行し,パスが通っていればOK
$ which flutter
開発環境に必要なものを確認する
$ flutter doctor
上記を実行することで足りないもの,問題があるところを教えてくれる
- ✔︎マーク:問題なし
- ✖︎マーク:開発環境が不足
- !マーク:問題あり
Android Studio
Android Studioをインストール
- Android Studioをダウンロード
- Android Studioを起動し、表示にしたがってインストール.
※基本的には全部Next, Finishをクリック
Welcome to Android Studioの画面が出れば成功です.
Android Studioにプラグインをインストール
Android StudioにFlutterとDartのプラグインをインストール.
起動画面から
- Configure->Pluginsを選択
- 検索ボックスにFlutterと入力
- Flutterをインストール
※DartプラグインはFlutterプラグインのインストールと同時にインストールされます.
デバイスのエミュレータをインストール
Android Studioでデバイスのエミュレータをインストール.
起動画面から
- Start a new Flutter projectを選択
- Flutter Applicationを選択してNextをクリック
- Project nameは任意の名前で入力しNextをクリック
- Company domainは任意の名前で入力しFinishをクリック
- エディタが表示されたら、メニューバーのTools->AVD Managerを選択
- Create Virtual Deviceをクリック
- Category->Phoneを選択されていることを確認し、任意のDeviceを選択してNextをクリック
- 任意のOSをDownloadをクリックしてダウンロード
- ダウンロードした項目を選択し、Nextをクリック
- 設定画面が出てきますが、何もせずにFinishをクリック
これでデバイスのエミュレータのインストールが完了しました.
Androidのライセンスを許可
Androidのライセンスを許可しないと実行した際に,!マークが出るので許可する.
$ flutter doctor --android-licenses
上記コマンドを実行するとライセンス認証画面が出てくるので yを入力し,Enterを押して許可.
flutter doctorを実行し、Android toolchainの部分に✔マークがついていれば成功.
Xcode
Xcodeをインストール
AppStoreから入手できるので,そこからダウンロードしてインストール.
CocoaPods
CocoaPodsをインストール
CocoaPodsが必要なのでインストール.
$ sudo gem install cocoapods
VSCode
VSCodeをインストール
- VSCodeをダウンロード
- 特に難しいところはないので,解凍してアプリケーションフォルダに移動
Flutterの拡張機能をインストールする
Shift+Command+Xで拡張機能を表示
検索ボックスにFlutterと入力
Flutterの拡張機能をインストール
最終チェック
flutter doctorで確認する
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.1, on macOS 11.2.3 20D91 darwin-x64, locale en-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.1)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.52.1)
[✓] Connected device (1 available)
• No issues found!
一番最後にNo issues found! と表示されていれば環境構築完了