今回はflutterとandroid studioをダウンロードして、Flutterをandroid studioで動かす環境構築をしていきます。
環境はWindowsです。
Flutter SDK をダウンロード
まず、flutterをダウンロードします。
https://docs.flutter.dev/get-started/install
インストーラとかではなく、zip形式の配布です。
zip ファイルを解凍し、任意の場所 (例: C:\flutter
) に配置します。
FlutterのPATHの設定
Flutter をPATH環境変数に追加します。
[スタート] 検索バーに「env」と入力し、[環境変数を編集]を選択します。 [ユーザー変数]の下に、PathにFlutterの配置場所(例C:\flutter
)を追加します。
コマンドプロンプトでflutter doctorを実行
スタートメニューからコマンドプロンプトまたはPowerShellを開きます。
以下のコマンドを入力して動けばOK
flutter doctor
エラーについて
各記号の意味は下記の通りになります。
- ✓:問題なし
- !:警告あり
- ×:問題あり/インストールなし
上記がでたので案内に従い flutter upgrade を実行します。
flutter upgrade --force
以下のメッセージが出る場合、
Your flutter checkout has local changes that would be erased by upgrading. If you want to keep these changes, it is recommended that you stash them via "git stash" or else commit the changes to a local branch. If it is okay to remove local changes, then re-run this command with "--force".
上記のエラーが出た場合は、以下で解決
flutter upgrade --force
以下のエラーは無視してOKです。
Windows Version (Unable to confirm if installed Windows version is 10 or greater)
Windowsの言語設定が英語以外の場合に発生する不具合のようなので、無視して頂いて大丈夫です
https://github.com/flutter/flutter/issues/117890
以下のエラーは後述のcmdline-tools で解決します。
Android toolchain - develop for Android devices
Visual Studioのエラーも出ますが、今回は入れませんので無視してOKです。
Android Studio をインストール
以下にアクセスします。
https://developer.android.com/studio
Android Studioをダウンロードします。
インストーラを起動し、初期設定のまま完了まで進めます。
設定の引継ぎは今回ないのでこのままOK。
初回、Google に統計情報を送るか聞かれますが、送らないにしました。
NEXT
NEXT
テーマは好きな方を選んでください。
NEXT
ライセンスに同意(Accept)を選んでFinish
※上記は2個所同意するライセンスがあります。3つ以上出る場合もありますので同意して進めてください。
Android Studio に Flutter プラグインインストール
まず、起動してpluginsを押します。
flutterで検索しインストール
Accept
install
restart IDE
Restart
再起動すればFlutterプラグインのインストールは完了です。
cmdline-tools をインストール
前述していた以下のエラーを解決します。
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
X cmdline-tools component is missing
Run path/to/sdkmanager --install "cmdline-tools;latest"
See https://developer.android.com/studio/command-line for more details.
X 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.
Android StudioのWelcome画面に行きます、
More Actions から「SDK Manager」を選択
SDK tool タブに移動し、「Android SDK Command-line Tools」にチェックを入れて「OK」をクリックします
OK
コマンドプロンプトを開いて以下を実行
flutter doctor --android-licenses
はい、いいえか聞かれたら、すべてyを入力
終わったら以下を実行してみます。
flutter doctor
Visual Studio - develop for Windows
上記エラーとなっていますが、Windows アプリを作らない場合はそのままでOKです。
Windows アプリの開発をするためには Visual Studio のインストールが必要です
Visual Studio のコミュニティ(無料)版をダウンロードします
https://visualstudio.microsoft.com/ja/downloads/
今回は使いません。
Flutterアプリプロジェクトを作成
次にプロジェクトを作ります。
今回はデモまで動かしてみます。
「New Flutter Project」 をクリック
Flutterを選択し、Flutter SDKのパスを入力します。
前述したパスと違い、binの1つ上の階層のフォルダを指定します。
適当な名前を使えてOK
起動したら、上のメニューにあるデバイスから「chrome (web)」を選び、さらに右にある緑色の再生ボタンを押します。
この画面がでたら完了です!
プラスボタンを押すと数字が増えていきます。