flutterの環境をandroid studioで構築

今回は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)」を選び、さらに右にある緑色の再生ボタンを押します。

この画面がでたら完了です!

プラスボタンを押すと数字が増えていきます。

コメントを残す