🙆
【Flutter×Win11】導入手順の個人的メモ
初めに
この記事は既存の記事を参考にして作成し、それに加えて直面したエラー等の解決を付け加えた個人的なメモとなっている。
動作環境
- 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ドライブ直下に保存した。
③環境変数を設定する
手順は以下の通り。
- Windowsで「環境変数を編集」を開く。
- 「ユーザ環境変数」項目の【Path】を選択して【編集】を押す。
- 「環境変数名の編集」ウィンドウが出てくるので、右側にある【新規】を押す。
- Cドライブ直下にファイルがある場合は以下のPathをここに貼り付けて【OK】を押す。
追加するPath
C: \flutter\bin
環境変数って何?っていう人はこれをざっくり見れば雰囲気が分かると思う。
④設定できているかの確認
Flutterには開発環境構築に必要なものを教えてくれるコマンドが用意されているので、以下のコードをコマンドプロンプトで実行してみる。
C> flutter doctor
チェックが入っているものが準備が完了しているもの。×マークや!マークが出るのはまだ準備ができていないものを示している。
この時、Flutterの項目にチェックマークが入っていれば大丈夫である。
Android Studio関連の設定をする
①初めにインストール
公式サイトでインストールしたAndroid Studioのインストーラを起動する。
基本的に【Next】を押していれば大丈夫である。
②Android Studioの設定
- Android Studioを起動する。
- 初めてAndroido Studioを起動した場合は「Do not import settings」を選択する。
- Googleのデータ収集の確認ダイアログが表示される。
- 「Welcome」の画面で【Next】を押す。
- 「Install Type」の画面で「Standard」のままで【Next】を押す。
- 「Select UI Theme」の画面で好きな見た目を選択する。
- 「Verify Settings」の画面で【Next】を押す。
- 「Licence Agreement」の画面で「android-sdk-license」と「intel-android-extra-license」を選択して【Accept】に変える。その後、【Finish】を押す。
③Flutterプラグインのインストール
- Android Studioの「Plugin」を選択し、「Flutter」をインストールする。
- 途中、「Darts」のプラグインのインストールも促されるので入れる。
- インストールが終わったらAndroid Studioを再起動する。
- 再起動後、Flutterのプロジェクトが作成できるようになる。
④設定できているかの確認
再び、コマンドプロンプトで以下のコードを実行してみる。
C> flutter doctor
この時、Android Studioの項目にチェックマークが入っていれば大丈夫である。
以下では、私が直面したメッセージと解決法を書いていく。
C> flutter channel master
C> flutter doctor --android-licenses
プロジェクトの始め方
①プロジェクトの作成
- Android Studioで「New Flutter Project」を押し、「Flutter」を選択する。
- 「Flutter SDK path」を聞かれるため、以下のディレクトリを指定する。
C: \flutter
- プロジェクト名、保存場所を好きに設定して【Finish】
予約語はこちらを参照。
②エミュレータのダウンロード
- [Tools]>[Device Manager]を開き、【Create device】を押す。
- 機種とバージョンを選んで【Next】を押し、【Finish】で設定完了。
- 作成されたエミュレーターの▶(実行ボタン)を押すと、エミュレーターが表示される。
参考記事
Discussion