Flutter の開発環境準備

FlutterHow To

Flutter とは、スマホアプリやウェブアプリ、デスクトップアプリ等のネイティブアプリを単一のコードから作成できるUIフレームワークです。私がこよなく愛しているGoogle製。

開発環境

  • Windows 10 Home 21H1
  • Flutter 2.5.1
  • Android Studio 2020.3.1.24
  • Android SDK 31.0.0
  • Android SDK Command-line Tools 5.0
  • VS Code 1.60.2

Windows に Flutter をインストール

Windows に Flutter をインストールします。インストールと言っても FlutterSDK を適当なフォルダに展開してパスを通すだけ。

ダウンロード

まず 公式サイト から「flutter_windows_2.5.1-stable.zip」をダウンロードします。

flutter_windows_2.5.1-stable.zip をダウンロード

今回は分かりやすくCドライブの直下に展開しました。

Cドライブの直下に展開

パス設定

コマンドプロンプトから Flutter のコマンドを使えるようにするためパスを設定します。パスを通すと言う作業ですね。

コントロールパネルのシステム画面を開いて、システムの詳細設定を選択します。

システムの詳細設定を選択

システムのプロパティが開くので、詳細設定タブの「環境変数」を選択します。

詳細設定タブの環境変数を選択

ユーザ環境変数の「Path」を選択してから「編集」ボタンをクリックします。

ユーザ環境変数

環境変数名の編集画面で Flutter を展開した場所の「bin」フォルダを設定してあげます。今回はCドライブの直下に展開したので「C:\flutter\bin」を設定しました。

終わったら「OK」ボタンを押して全ての画面を閉じます。

C:\flutter\bin を設定

動作確認

最後にコマンドプロンプトに下記コマンドを入力して動作確認と依存環境のチェックをします。

flutter doctor
flutter doctor

Flutter は正しく動作しているみたいですが、Android Studio がインストールしていないため × が出ちゃってますね。

Android Studio をインストール

Android Studio がいるみたいなのでインストールします。

まず、公式サイト から「android-studio-2020.3.1.24-windows.exe」をダウンロードします。

android-studio-2020.3.1.24-windows.exe をダウンロード

ダウンロードしたアイコンを実行して Android Studio をインストールします。

アイコン

特に設定は変えず「Next」を押していけばインストールできます。

Android Studio インストール

インストールが終わったら一度実行しておきましょう。

インポートするものは無いので「Do not import settings」を選んで「OK」を押します。

Do not import settings

使用状況を匿名で送信するかの確認です。気になる人は「Don’t send」を選択すれば送信しない設定になります。

Don't send

ここまで進めたら再度 Flutter の依存環境チェックをします。

Android Studio は OK になったんですがまだ Android toolchain が × のままですね。もう少し設定が必要そうです。

Android Studio OK

セットアップウィザード

Android Studio のセットアップウィザードを完了させないとダメそうなので「Next」ボタンを押して作業を続行します。

Android Studio セットアップウィザード

特に気にしないので「Standard」を選択したまま「Next」ボタンを押して、

Standard を選択

UIのテーマはお好みで、私はダーク系が好きなのでこのままです。

UIテーマ

最後にインストールされる内容が一覧で表示されます。問題なければ「Finish」を押してセットアップ開始になります。

Finish を押してセットアップ開始

セットアップウィザードが終わったら 再度 Flutter で依存環境をチェックします。

今度は2つ × が付いちゃいました。1つづつ解消していきましょう。

  • cmdline-tools component is missing
  • Android license status unknown.
cmdline-tools component is missing

cmdline-tools component is missing

こちらのエラーは SDKマネージャーを使って アンドロイドのコマンドラインツールをインストールしろってことだと思います。

Android Studio のスタートメニューから「More Actions」をクリックして「SDK Manager」を選択します。

SDK Manager を選択

「SDK Tools」タブを選択し「Android SDK Command-line Tools」にチェックを入れて「OK」ボタンでインストール開始します。

Android SDK Command-line Tools

最終確認ダイアログでも「OK」ボタンを押します。

最終確認ダイアログ

ライセンスにも同意しておきます。

ライセンスに同意

コマンドラインツールのインストールが終わったら再度 Flutter で依存環境をチェックします。

Android licenses not accepted.

コマンドラインツールのエラーは消えましたね。

Android licenses not accepted.

これは簡単、アンドロイドライセンスに同意してね。ってことです。

コマンドプロンプトで下記コマンドを実行してアンドロイドライセンスに同意しましょう。

flutter doctor --android-licenses

こんな画面が出たら「Y」キーを入力してエンターキーを押します。

Yキーを入力

ちなみに、大文字で書かれて方が何も入力しないでエンターキーを押したときに送信されるキーです。

7回同じ操作が続きます。

「All SDK package licenses accepted」と表示されれば完了です。

All SDK package licenses accepted

最後に依存環境をチェックします。

全てにチェックが入って問題なく使える状態になりました。

No issues found!

終わりに

今回はウェブ用に開発していく予定なので、Androidエミュレーターのインストールや Visual Studio 2019 のインストールはやりません。

必要になったらその時にインストールすることにします。

既にインストールしてあった VS Code や Java は説明出来てませんが、同じ要領インストールしてみて下さい。

タイトルとURLをコピーしました