Flutterをインストールする
このページのゴール
- Flutterをインストールする
- Web開発環境を設定する
- iOS開発環境を設定する（任意）
- Android開発環境を設定する（任意）
インストール・環境設定の流れ
それでは、Flutterを使うための準備を進めていきましょう 🔧🔧🔧
ステップ
- Flutterをインストール
- Web開発環境を設定
- iOS開発環境を設定（任意）
- Android開発環境を設定（任意）
1. Flutterをインストール
❗️注意事項❗️
- 本サイトでは基本的にMacを使用することを前提としています。
Flutterをダウンロードしホームディレクトリに保存
flutter_macos_2.0.1-stable.zip
ダウンロードしたファイルを解凍
Flutterにパスを通す
ログインシェルの設定ファイルにパスの情報を追記
// bash を使っている場合
// .bash_profile に以下を追記
export PATH="$PATH:$HOME/flutter/bin"
// zsh を使っている場合
// .zprofile に以下を追記
export PATH="$PATH:$HOME/flutter/bin"
※ 使っているシェルを確認する方法
$ echo $SHELL
/bin/zsh
Flutterにパスが通っているか確認
バージョン情報が表示されればOK 👍
$ flutter --version
Flutter 2.0.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision c5a4b4029c (8 days ago) • 2021-03-04 09:47:48 -0800
Engine • revision 40441def69
Tools • Dart 2.12.0
2. Web開発環境を設定
Chromeをインストール
https://www.google.com/chrome/
正しく設定できてるか確認
flutter doctorで設定状況が確認できます。
Chromeのところに ✅ が入っていればOK 👍
$ flutter doctor
...
[✓] Chrome - develop for the web
...
3. iOS開発環境を設定（任意）
❗️注意事項❗️
設定が簡単なWebアプリで動作確認を行っていくため、
スキップしてもOKです 👍
Xcodeをインストール
https://apps.apple.com/us/app/xcode/id497799835
コマンドラインツールを設定
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -license
シミュレータを起動
$ open -a Simulator
正しく設定できてるか確認
flutter doctorで設定状況が確認できます。
Xcodeのところに ✅ が入っていればOK 👍
$ flutter doctor
...
[✓] Xcode - develop for iOS and macOS
...
4. Android開発環境を設定（任意）
❗️注意事項❗️
設定が簡単なWebアプリで動作確認を行っていくため、
スキップしてもOKです 👍
Android Studioをインストール
https://developer.android.com/studio
エミュレータを作成
| Android Studio を起動し 「Configure → AVD Manager」を選択 |
|
| 「Create Virtual Device」を選択 |
|
| 作成したいデバイスを選択し「Next」 |
|
|
作成したいOSを選択し「Next」 OSがインストールされていない場合は、 「Download」からインストールできます。 |
|
| デバイス名を入力し「Finish」 |
|
| デバイス一覧に表示されていればOKです 👍 |
|
エミュレータを起動
Android Studio を起動し Configure >> AVD Manager からエミュレータを起動
正しく設定できてるか確認
flutter doctorで設定状況が確認できます。
Android toolchainのところに ✅ が入っていればOK 👍
$ flutter doctor
...
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
...
まとめ
- Flutterをダウンロードしパスを通すことでインストール完了
- iOS/Android/Webの設定状況は
flutter doctorで確認
環境設定お疲れさまでした。
次はエディタの設定です、アプリを起動するまでもう少しなので頑張りましょう 💪
