Flutterをインストールする

このページのゴール

  • Flutterをインストールする
  • Web開発環境を設定する
  • iOS開発環境を設定する(任意)
  • Android開発環境を設定する(任意)

インストール・環境設定の流れ

それでは、Flutterを使うための準備を進めていきましょう 🔧🔧🔧

ステップ

  1. Flutterをインストール
  2. Web開発環境を設定
  3. iOS開発環境を設定(任意)
  4. 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 で確認

環境設定お疲れさまでした。
次はエディタの設定です、アプリを起動するまでもう少しなので頑張りましょう 💪

参考情報