共同開発しているチームメイト向けに、Flutterの環境構築の手順を書き留めます。
基本設定のままで1から10まで書こうと思っていますので、不要な個所は適宜読み飛ばしていただくようお願いします。
少しバージョンが古いですが、どのバージョンでも概ね同じかと思われます。
間違い等ありましたら指摘いただけると幸いです。
バージョンとか
今回は以下の状況で環境構築の説明をしてみたいと思います。
- OS : Windows 11 Education 21H2
- CPU : intel x86 CPU (AMDの場合は追加のインストールが必要になるかもしれません)
- Flutter 2.10.5-stable
- Android Studio Chipmunk | 2021.2.1
Android Studio のダウンロードとインストール
ここからAndroid Studioをダウンロードします。
インストーラーを起動して、次へを押していきます。
ここでintel HAXMを使いたい方はチェックします。
大抵の人は WSL2 が有効になっていてHAXMを使うことができないのでチェックしなくてかまいません。代わりに Hyper-V を使ってエミュレータ等が動く設定になります。
また、Android SDK Locationの部分に赤文字でエラーが出る場合は、ユーザー名が日本語になっていることが原因かもしれません。Cドライブ直下など、日本語が含まれない場所のパスに書き換えます。
intelHAXMを使う方は次の画面でエミュレータが使用するRAMの量を指定します。
次にライセンスの同意画面になるのですべてAcceptにチェックして、Finishを押します。
Flutter SDK のダウンロード
こちらが公式HPとなっています。
右上の Get Started を押して、 Windows を選択し、
最新バージョンを使いたい方は flutter_windows_3.00-stable.zip の青いボタンを押してダウンロードします。
ここでは version 2.10.5 を導入するので、青いボタンの下の SDK releases リンクから、 version 2.10.5 をダウンロードしてください。
ダウンロードしたファイルを展開(解凍)し、インストールしたいフォルダーに移動させます。この記事では C:\Users\<UserName>\ 下に置くように説明します。(ユーザー名に日本語が入っている人は C:\など、パスに日本語が入らない場所に置くことをお勧めします。)
パスを通します。
- 先ほど移動させたflutterフォルダの中のbinフォルダのパスをコピーします。
(記事通りの場所に置いた方は、C:\Users\<UserName>\flutter\binになるかと思います。) - Windowsスタートボタンを右クリックして、メニューの中の [システム] をクリックします。
- [システムの詳細設定] をクリックして、出てきたウィンドウの中の [環境変数] をクリックします。
- 上のユーザー環境変数の中のPathを選択して、 [編集] をクリックして、 [新規] をクリックして先ほどコピーしたパスを貼り付けます。
- [OK] をクリックしてウィンドウを閉じます。
これで、flutterコマンドがどこからでも実行できるようになりました。
最後に、PowerShellやコマンドプロンプト (Windows11をお使いの方は Windows Terminal がインストールされているかと思います) で、
flutter doctor
と打って実行できればOKです。
flutter : 用語 'flutter' は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。名前が正しく記述されていることを確認し、パスが含まれている場合はそのパスが正しいことを確認してから、再試行してください。
発生場所 行:1 文字:1
+ flutter
+ ~
+ CategoryInfo : ObjectNotFound: (flutter:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
とエラーが出る場合には、パスの追加が上手くいっていないので上の手順をもう一度見直すか、PCを一度再起動してみてください。
コマンドの実行に成功すると、以下のような出力が確認できるかと思います。
PS C:\Users> flutter doctor
Running "flutter pub get" in flutter_tools... 9.1s
[✓] Flutter (Channel stable, 2.10.5, on Microsoft Windows [Version 10.0.22000.739], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
✗ cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.
[✓] Chrome - develop for the web
[✗] Visual Studio - develop for Windows
✗ Visual Studio not installed; this is necessary for Windows development.
Download at https://visualstudio.microsoft.com/downloads/.
Please install the "Desktop development with C++" workload, including all of its default components
[✓] Android Studio (version 2021.2)
[✓] Connected device (3 available)
[✓] HTTP Host Availability
! Doctor found issues in 2 categories.
環境によっては Chrome に[✗]が付いている場合がありますが、 Chrome がインストールされていなくても、 Microsoft Edge で開発可能ですので大丈夫です。
Android cmdline-tools のインストール
コマンドからインストールせずにAndroid StudioのGUIからインストールします。
-
Android Studioの設定を開きます。
-
Appearance & Behavior 内の System Settings 内の Android SDK を選択します。
-
SDK Tools タブ内の Android SDK Command-line Tools (latest) にチェックをつけて、 [Apply] をクリックしてインストールします。
もう一度flutter doctorを実行すると、✗ cmdline-tools component is missingの文字が消えているはずです。
android license への同意
Power Shell や コマンドプロンプト で、
flutter doctor --android-licenses
を実行します。7回ぐらい y を入力すると終わるはずです。
もう一度flutter doctorを実行すると、✗ Android license status unknown.の文字が消えているはずです。
これで、 flutter SDK の導入は完了です。
flutter doctorの画面で Visual Studio に関する警告が出ている場合がありますが、 Windows のソフトウェアを開発しない場合は無視して構いません。
Android Studio へ Flutter & Dart プラグインをインストール
Android Studio に Flutter プラグインをインストールします。
- Plugins タブから Marketplace で flutter を検索します。
- Flutterプラグインを Install します。
- 途中で Dartプラグイン をインストールするか訊いてくるので、 [OK] を押してインストールします。
- Android Studio を再起動します。
パスの入力とテスト
環境構築が上手くできたか確認してみます。
[New Flutter Project] を選択して、新規プロジェクトの画面で Flutter を選択し、 Flutter SDK path: に、flutterフォルダのパスを入力します。
(記事通りの場所に置いた方は、C:\Users\<UserName>\flutterになるかと思います。)
⚡The folder specified as the Flutter SDK home does not exist. の文字が消えたら成功です。
[次へ] を押します
Web にチェックを入れて [完了] をクリックします。
画面中央上のほうにある を押して、プルダウンから Chrome か Microsoft Edge を選択します。
横にある緑の ▶ ボタンを押します。
ブラウザで、テストアプリが出てきたら成功です。
[File] → [Close Project] を選択すると、プロジェクトを閉じてプロジェクト選択画面に戻ります。
これで、 Android Studio の導入と Flutter の環境構築は完了です!
以下では、 Android Studio の日本語化と、 GitHub を使う場合の設定が書かれているので使う方は読んでみてください。
Git のインストールと GitHub を使うための設定
ここでは、 GitHub のアカウントは持っている前提で、 GitHubアカウントの追加とリポジトリのクローンまでを説明します。
- Android Studio の最初のメニュー画面の ⋮ から Get from Version Controll... を選択します。
- 出てきた画面で画面中央に Git is not installed. と文字が出ている場合は install を押して Git をインストールします。
- 左側のタブから GitHub を選択し、 Log In with Token... を選択します。
- ブラウザで https://github.com/ を開き、右上の自分のアカウントメニューから Settings を開きます。
- Developer settings から、Personal access tokens を選択します。
- Generate new token を選びます。
- Note に自分がtokenを識別できるように名前を書いて、 Expiration で鍵のtokenの有効期限を設定します。
- tokenのscopeには "repo", "workflow", "read:org", "gist" を設定して、tokenを生成します。
- 生成したtokenを Android Studio に張り付けて [Log In] します。
- ログイン出来たら GitHub のリポジトリ一覧が表示されるので、flutterプロジェクトのリポジトリを選んで [clone] を押すと読み込まれます。
GitのUsernameとemailsの設定
Android Studio 内のターミナルか、Power Shell や コマンドプロンプト で
git config --global user.name "<YOUR GIT HUB ACCOUNT NAME>"
git config --global user.email "<YOUR GIT HUB MAIL ADDRESS>"
を実行すると、コミットやプッシュができるようになります。
GitHubのメールアドレスは以下の手順で確認できます。
- GitHub の Settings ページの Emails タブから、
<数字>+<GitHubアカウント名>@users.noreply.github.comとなっているメールアドレスを探します。 - これをコピーして、
git config --global user.emailの後に貼り付けて実行します。
これで、お使いのPCからGitHubにコミットやプッシュができるようになりました。
Android Studioの日本語化
Android Studio の日本語化にはプラグインを入れる必要がありますが、記事執筆時点では Marketplace のカタログにはありません。
Android Studio などの IDE を開発している JetBrains 社のダウンロードページから導入します。
-
こちらのページから Japanese Language Pack をダウンロードします。
-
ダウンロードするバージョンは Android Studio のプロジェクト選択画面左下の歯車⚙マークから About を選択すると以下のような画面が出るので、赤線部分とダウンロードページの Version と Compatibility Range を見比べて適切なバージョンをダウンロードします。
-
ダウンロード出来たら、 Android Studio の Plugins からプラグインインストールページを開き、ウィンドウ中央上の歯車⚙マークから [Install Plugin from Disk...] を選択します。
ダウンロードしたプラグインを展開(解凍)する必要はありません。 -
画面の指示に従ってインストールし、 Android Studio を再起動したら日本語化は完了です。