Chapter 02

環境構築

takumma
takumma
2021.02.23に更新
このチャプターの目次
  1. 事前準備
  2. Flutter SDKの取得
  3. flutter doctorを実行する
  4. Android Studioのセットアップ
  5. [Mac向け]Xcodeのセットアップ
  6. [Mac向け] iOS tools
  7. VScodeのFlutter・Dart拡張機能をインストール
  8. 実行用端末の準備
  9. 環境構築完了！

ハンズオンを始める前に、まずは Flutter の環境構築をしましょう。
もう Flutter の環境構築は出来ているよ！という人は、次のチャプターまで飛ばしてください。

では、まずは Flutter の環境構築からはじめましょう。

事前準備

環境構築を始める前に自分の PC に git が入っていない人はまず git をインストールしておいてください。本書では説明を省きますので、以下のサイト等を参考にしてください。
(インストールされているかは、ターミナルなどで git --version と実行することで確認が出来ます。)
https://git-scm.com/book/ja/v2/使い始める-Gitのインストール

Flutter SDKの取得

まずは Flutter SDK を取得しましょう。
Flutter SDK の取得方法は OS によって異なるので、自分と同じ OS の説明を参照してください。

Windows

SDKのダウンロード

まずは公式のページの flutter_windows_x.xx.x-stable.zip (x はバージョンが記載されている)のところをクリックして Flutter SDK の zip ファイルをダウンロードしてください。

ダウンロード出来たらその zip ファイルを、 C:\src\ というディレクトリを作成してそこに展開してください。

ディレクトリ構成
src
└── flutter
    ├── bin
    └── ...

このときに、flutter フォルダの中にある bin ファイルの絶対パスをメモしておいてください。上の場合は C:\src\flutter\bin になります。

次は PATH を設定しましょう。

PATHの設定

以下の手順で Flutter の環境変数を追加しましょう。

  • 左下の検索バーを開いて「env」と入力して「システム環境変数を編集」を開きます。

  • 「環境変数」を開きます。

  • ユーザー環境変数の中の「Path」を選択して「編集」をクリックします。

  • 「新規」で先ほどメモした bin フォルダの絶対パスを入力して「OK」を押します。

  • 「Path」がない場合はユーザー環境変数の「新規」をクリックして、変数名を「Path」、変数値を先ほどメモした bin フォルダの絶対パスを入力して「OK」を押します。

これで Flutter SDK の設定は完了です。

Mac

SDKのダウンロード

まずは公式のページの flutter_macos_x.xx.x-stable.zip (x はバージョンが記載されている)のところをクリックして Flutter SDK の zip ファイルをダウンロードしてください。
そしてダウンロードしたファイルを展開します。
以下のコマンドはホームディレクトリに development フォルダを作ってそこに展開していますが、他の場所に展開してもかまいません。

$ mkdir ~/development
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_x.xx.x-stable.zip # 展開

展開出来たら、次は Flutter のパスを通しましょう。

パスの設定

以下のコマンドを実行して、Flutter SDK のパスを通しましょう。
[PATH_TO_FLUTTER]には先ほど展開した場所の絶対パスが入ります。(上の場合は /Users/[ユーザー名]/development )

# パスを書き込む
$ echo 'export PATH="[PATH_TO_FLUTTER]/flutter/bin:$PATH"' >> ~/.bash_profile
# 設定を反映させる
$ source ~/.bash_profile

これで Flutter SDK の設定は完了です。

Linux

linux の場合は以下のコマンドで簡単に SDK を取得できます。

$ sudo snap install flutter --classic

インストールしたら以下のコマンドでパスを確認しましょう。

$ flutter sdk-path

これで Flutter SDK の設定は完了です。

SDK の設定ができたら、次は flutter doctor で環境の確認をしましょう。

flutter doctorを実行する

以下のコマンドを実行してください。

$ flutter doctor

flutter doctorとは、flutter で開発する上で必要なエディタなどの環境をチェックするコマンドです。
より詳しく知りたいときは、以下のコマンドを実行してください。

$ flutter doctor -v

以下は実行結果の例(Windows)です。

$ flutter doctor -v
[√] Flutter (Channel stable, 1.22.5, on Microsoft Windows [Version 10.0.19042.662], locale ja-JP)
    • Flutter version 1.22.5 at C:\src\flutter
    • Framework revision 7891006299 (6 weeks ago), 2020-12-10 11:54:40 -0800
    • Engine revision ae90085a84
    • Dart version 2.10.4

[X] Android toolchain - develop for Android devices
    X Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_SDK_ROOT to that location.
      You may also want to add it to your PATH environment variable.


[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).

[!] Connected device
    ! No devices available

! Doctor found issues in 3 categories.

既にセットアップが完了している項目には ✓ がついており、まだセットアップが完了していない項目には X がつき、セットアップする方法が簡単に書かれています。
ここからは flutter doctor で確認しつつ、完了していない項目をセットアップをしていきます。
セットアップが完了している項目、できていない項目は個人の環境によって違うので自分で適宜確認しながらセットアップを完了させてください。
セットアップが完了したら、次のチャプターまで飛んでください。

以下から飛んで各種セットアップを進めてください。

Android Studioのセットアップ

Android Studio のセットアップを行います。

Android Studioのインストール

以下のリンクからダウンロードして Android Studio をインストールしましょう。

https://developer.android.com/studio

「DOWNLOAD ANDROID STUDIO」を押せば自分の OS にあったものがダウンロード出来ます。

DOWNLOAD ANDROID STUDIO

ダウンロード出来たら、ダウンロードしたファイルを実行します。
実行したら、基本的に何も変更せずに「Next」をどんどんクリックしていってインストールを行ってください。

インストール出来たら Android Studio を起動しましょう。
起動したら、「Import Android Studio Settings」という画面が表示されます。
ここでは以前のバージョンで Android Studio を使用していた場合に設定をインポートできますが、今回は「Do not import settings」を選択して「OK」を押しましょう。

次に「Data Sharing」という画面が出ます。
Android Studio の使用状況を匿名で Google に送るか、という質問ですのでどちらか好きなほうを選んでください。

そうするとセットアップウィザードが表示されます。
Install Type は「Standard」を選択しておきましょう。

「Select UI Theme」は好きなほうを選択してください（筆者は Darcula です）。

最後に確認をして「finish」をクリックしましょう。
すると Android Studio を使うのに必要なものがダウンロードされます。

ダウンロードが完了したら「finish」を押してひとまず Android Studio のインストールは完了です。

Android StudioでFlutter, Dartプラグインのインストール

以下の手順で Android Studio にプラグインをインストールしましょう。

  1. AndroidStudio を起動します。
  2. 右下から Configure > Plugins を開きます。
  3. 検索ボックスから「Flutter」と検索して Flutter プラグインを Install します。
  4. Dart プラグインをインストールするように求められたら、Yes をクリックします。
  5. インストールできたら、AndroidStudio を再起動しておきましょう。

Android licensesの許可

Flutter を使うには Android licenses を承認する必要があります。

X Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

メッセージに書かれているように、--android-licensesのオプションをつけて flutter doctor を実行します。
実行するとライセンスの規約が流れてくるので、yと入力して Enter を押して承認していって下さい。

$ flutter doctor --android-licenses
Warning: File C:\Users\[username]\.android\repositories.cfg could not be loaded.
7 of 7 SDK package licenses not accepted.
Review licenses that have not been accepted (y/N)? y
Accept? (y/N): y
# 略
Accept? (y/N): y
All SDK package licenses accepted

これで Android licenses の承認ができました。

[Mac向け]Xcodeのセットアップ

  1. App Store から Xcode をインストールします
  2. 以下のコマンドで「Xcode command-line tools」を設定します
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -runFirstLaunch
  1. 以下のコマンドで Xcode のライセンスに同意しましょう。「q」を入力してページを抜け、「agree」と入力してライセンスに同意します。
$ sudo xcodebuild -license
  1. Xcode を起動します。起動したときに「Install Additional required components」というメッセージが表示された場合は「install」をクリックしてください。

これで Xcode のセットアップは完了です。

[Mac向け] iOS tools

flutter devices で示された通りに、コマンドを実行します。

brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy

VScodeのFlutter・Dart拡張機能をインストール

VScode で Flutter を使いたい場合は拡張機能をインストールしておきましょう。

VScode を開いて、左の Extensions から「flutter」と検索して「Flutter」を install します。
同様に「Dart」の拡張機能も install します。

インストールできたら、VScode は再起動しておきましょう。

実行用端末の準備

作ったアプリを実行するための端末の準備をしましょう。
実行する端末には以下の二種類があります。

  • Android・iOS 端末
  • エミュレータ・シミュレータ（PC 上で動く仮想の端末）

どれかひとつは実行できるように準備しておいてください。
準備ができたかどうかは以下のコマンドでも確認できます。

$ flutter devices

Androidエミュレータの準備

Android Studio を起動して下の Cofigure から ADV Manager を開きます。
開くと、エミュレータが既にある場合は以下のように表示されます。

「▷」ボタンをクリックするとエミュレータが実行されます。

エミュレータが無い場合は作成しましょう。

エミュレータを作成

まず、「Create Virtual Device...」をクリックします。
クリックしたら、まずはデバイスを選択します（どのデバイスでもかまいません）。選択したら「Next」をクリックします。

次にシステムイメージを選択します。
今回は、

  • Release Name: R (API level: 30)
  • ABI: x86
  • Target: Android 11.0(Google Play)
    のものを選択しました。

システムイメージはダウンロードする必要があるので、使うシステムイメージの「Download」をクリックしてダウンロードしましょう。

ダウンロードが出来たら「finish」を押してシステムイメージを選択し、「Next」をクリックします。

「finish」をクリックしてエミュレータの作成は終了です。

Android端末の準備

以下の手順で行ってください。

  1. 設定 > 端末情報と開いて、ビルド番号を 7 回タップします。
  2. 設定 > 開発者オプションと開いて、開発者オプションを「ON」にします。
  3. 「USB デバック」にチェックを入れます。
  4. PC と USB でつなぐと「USB デバックを許可しますか？」というダイアログが出るので、「OK」押します。

これで設定は完了です。

iOSシミュレータの準備

iOS のシミュレータは特に準備はいりません。
開く時は Xcode を起動して、
Xcode > Open Developer Tool > Simulator
で起動できます。

また、以下のコマンドでも起動できます。

$ open -a Simulator

iOS端末の準備

iOS 端末はアプリを作成した後に設定する必要があります。なので、次のチャプターでアプリを作成した後にここへ戻ってきてください。

  1. 作成したアプリを Xcode で開きます。
  2. iOS 端末を USB で接続します。
  3. 上にあるデバイスメニューでデバイスを選択します。
  4. 左側にある「Runner」タブを開いて、Signing&Capabilities > Team でチームを選択します（最初は Add Account で AppleID を使ってアカウントを作成しましょう）
  5. Identity > Bundle Identifer で名前を適当なものに変更します。
  6. iOS 端末のほうの設定で、一般 > デバイス管理（もしくは一般 > プロファイル > デバイス管理）を選択して、信頼します。

これで完了です。

環境構築完了！

以上で Flutter の環境構築は終了です！
早速次のチャプターで最初のアプリを作りましょう！