Zenn
🙆

【Flutter×Win11】導入手順の個人的メモ

2023/03/07に公開
Flutter
tech

初めに

この記事は既存の記事を参考にして作成し、それに加えて直面したエラー等の解決を付け加えた個人的なメモとなっている。

動作環境

  • Windows 11 Home 22H2

まずはダウンロード

Flutter SDKのダウンロード

公式サイトから最新バージョンのFlutter SDKをダウンロードする。
記事公開時点のバージョンは3.7.5である。

Android Studioのダウンロード

公式サイトからAndroid Studioをダウンロードする。
記事公開時点のバージョンは2022.1.1.21である。

Flutter SDK関連の設定をする

①ダウンロードしたFlutter SDKを解凍する

名前は「flutter_windows_3.7.5-stable.zip」のような感じである。

②Cドライブ直下にフォルダを移動させる

解凍したファイルの中にあるflutterファイルを移動させる。「C:\Program Files\」など以外の場所が推奨されているため、今回はcドライブ直下に保存した。

③環境変数を設定する

手順は以下の通り。

  1. Windowsで「環境変数を編集」を開く。
  2. 「ユーザ環境変数」項目の【Path】を選択して【編集】を押す。
  3. 「環境変数名の編集」ウィンドウが出てくるので、右側にある【新規】を押す。
  4. Cドライブ直下にファイルがある場合は以下のPathをここに貼り付けて【OK】を押す。
追加するPath
C:\flutter\bin

環境変数って何？っていう人はこれをざっくり見れば雰囲気が分かると思う。
https://qiita.com/sta/items/63e1048025d1830d12fd

④設定できているかの確認

Flutterには開発環境構築に必要なものを教えてくれるコマンドが用意されているので、以下のコードをコマンドプロンプトで実行してみる。

C> flutter doctor

チェックが入っているものが準備が完了しているもの。×マークや!マークが出るのはまだ準備ができていないものを示している。
この時、Flutterの項目にチェックマークが入っていれば大丈夫である。

Android Studio関連の設定をする

①初めにインストール

公式サイトでインストールしたAndroid Studioのインストーラを起動する。
基本的に【Next】を押していれば大丈夫である。

②Android Studioの設定

  1. Android Studioを起動する。
  2. 初めてAndroido Studioを起動した場合は「Do not import settings」を選択する。
  3. Googleのデータ収集の確認ダイアログが表示される。
  4. 「Welcome」の画面で【Next】を押す。
  5. 「Install Type」の画面で「Standard」のままで【Next】を押す。
  6. 「Select UI Theme」の画面で好きな見た目を選択する。
  7. 「Verify Settings」の画面で【Next】を押す。
  8. 「Licence Agreement」の画面で「android-sdk-license」と「intel-android-extra-license」を選択して【Accept】に変える。その後、【Finish】を押す。

③Flutterプラグインのインストール

  1. Android Studioの「Plugin」を選択し、「Flutter」をインストールする。
  2. 途中、「Darts」のプラグインのインストールも促されるので入れる。
  3. インストールが終わったらAndroid Studioを再起動する。
  4. 再起動後、Flutterのプロジェクトが作成できるようになる。

④設定できているかの確認

再び、コマンドプロンプトで以下のコードを実行してみる。

C> flutter doctor

この時、Android Studioの項目にチェックマークが入っていれば大丈夫である。

以下では、私が直面したメッセージと解決法を書いていく。

https://github.com/flutter/flutter/issues/118502

C> flutter channel master

https://github.com/flutter/flutter/issues/117890

C> flutter doctor --android-licenses

プロジェクトの始め方

①プロジェクトの作成

  1. Android Studioで「New Flutter Project」を押し、「Flutter」を選択する。
  2. 「Flutter SDK path」を聞かれるため、以下のディレクトリを指定する。
C: \flutter
  1. プロジェクト名、保存場所を好きに設定して【Finish】

予約語はこちらを参照。
https://dart.dev/guides/language/language-tour#keywords

②エミュレータのダウンロード

  1. [Tools]＞[Device Manager]を開き、【Create device】を押す。
  2. 機種とバージョンを選んで【Next】を押し、【Finish】で設定完了。
  3. 作成されたエミュレーターの▶（実行ボタン）を押すと、エミュレーターが表示される。

参考記事

https://zenn.dev/knot/articles/flutter-environment#flutter-doctor
https://www.4qualia.co.jp/technology/solution_business/20220506140146.html

Discussion