🍒
Flutter を VSCode で環境構築してみた（Windows）

2024/09/17に公開
Flutter
VS Code
環境構築
tech
 Flutter環境構築Flutterをvscodeで環境構築しました。

作ったときにメモなく、記憶をたどりにしていますので、不備や事実と異なっていたらごめんなさい。

 そもそもFlutterとはFlutterは、Googleという会社が作った、アプリを作るためのツール（開発ツール）。
Flutterの特徴は、1つのプログラムを書くだけで、iPhoneでもAndroidでも動くアプリを作れることです。

普通であれば、iPhoneとAndroid用にそれぞれ別のプログラムを書く必要があるが、Flutterを使えば1回で済む。
また、Flutterは比較的新しい技術で、使いやすく、きれいなデザインのアプリを簡単に作れるという特徴があり、多くの会社や個人の開発者が使っていて、人気が高まっている。

 そもそもVscodeとはVSCode（Visual Studio Code）は、単なるテキストエディタではないとのこと。

プログラマーが使用する高度な開発環境だそうで、一般のテキストエディタよりも多彩な機能を持ち、プログラミングの効率を大幅に向上できる。
コード補完、リアルタイムエラー検出、プログラムの実行を一時停止したり、一行ずつ実行したりすることができて、変数の値をリアルタイムで確認することも可能。
Gitによるバージョン管理も便利で、コードの変更履歴を管理し、複数の開発者との協働が容易になる。

これにより、プロジェクトの進行状況を把握し、必要に応じて以前のバージョンに戻ることができる。
上記のバージョン管理は、環境構築において相当な曲者だそうで、「プログラムは好きだけど、環境構築はやりたくない」そんな方も多いみたいでした。
※環境構築の大変さについては下記サイトなど、参考になりました。

https://lab.coachtech.site/1656/

 そもそもAndroid StudioとはAndroid Studioは、Googleが開発した統合開発環境（IDE）で、特にAndroidアプリの開発に特化している。

Flutter開発においても、エミュレータ（擬似的に再現するソフト）の提供など重要な役割を果たす。
Android Studioでは、高性能エミュレータが機能として実装されていて、実機がなくても様々な種類のAndroidデバイスをシミュレートできます。

画面サイズ、解像度、性能など、多様な条件でアプリをテストできるため、ほぼリアルタイムで画面のレイアウトや実装した機能の不具合などの確認が可能。
また、視覚的なレイアウトエディタが利用でき、ドラッグ＆ドロップでUIを構築できる。

コードを直接書かなくても、アプリの画面デザインを作成が可能。
要するに、デモのようなものをサクッと便利に動かせるようなもの、です。

 目次前提条件(構築環境)
コマンドプロンプト/ターミナルの基本
Flutter SDKのインストール
VSCodeのインストール
VSCodeの設定（Flutter拡張機能のインストールなど）
Flutterプロジェクトの作成
Android Studioエミュレータの設定
Hello Worldアプリの実行
Gitを使用したFlutterバージョン管理
トラブルシューティング
感想

 1. 前提条件Windows 10以降
最低8GB以上のRAM
2.5GB以上の空きディスク容量

 2. コマンドプロンプト/ターミナルの基本コマンドプロンプトというのは、コンピューターに直接指示を出すための「窓口」みたいなものです。普段はマウスでクリックして操作していますが、コマンドプロンプトでは文字を打ち込んで指示を出します。
コマンドプロンプトの開き方：
画面左下の「スタート」ボタンを右クリックします。

表示されたメニューから「Windows PowerShell」か「コマンドプロンプト」を選びます。
下記のような黒い画面が出てきたら成功。
ここに命令を打ち込んでいきます。
基本的なコマンド：
cd（Change Directory）: フォルダを移動するコマンド

使い方：cd フォルダ名

例：cd Documentsと打ちエンターキーを押すと、ドキュメントフォルダに移動します。
イメージとしては、エクスプローラーでドキュメントフォルダに移動したイメージです。
本来は、マーカー部分をクリックして移動しますが、これを今コマンドを使ってPCに指示をしたことになります。
エクスプローラーの上記パスの部分をコピーして、コマンドプロンプトに入力しても移動できます。
はい、ここまで出来たら次行きましょう。
dir（Directory）: 今いるフォルダの中身を表示するコマンド

使い方：dirとだけ打ちます。
コマンドプロンプトでディレクトリを移動したまま、上記コマンドを入力しましょう。
このフォルダの中身になんのファイルがあるのかを表示できます。
はい、次です。
mkdir（Make Directory）: 新しいフォルダを作るコマンド

使い方：mkdir 新しいフォルダ名

例：mkdir MyProjectと打つと、MyProjectという名前の新しいフォルダができます。
フォルダができたかどうか、エクスプローラーを開いて確認してみましょう。
ここまで出来たら、コマンドプロンプトはOKです。

昔は、これでPCを操作していたらしいです。
これらのコマンドを使って、コンピューターの中を自由に移動したり、新しいフォルダを作ったりできます。
練習：
コマンドプロンプトを開いてみる。

cd Desktopと打って、デスクトップに移動してみる。

mkdir FlutterProjectsと打って、新しいフォルダを作ってみる。

dirと打って、本当にフォルダができたか確認してみる。
これらのコマンドは、これからのFlutterのセットアップでも使うので、覚えておくと便利です。

 3. Flutter SDKのインストールFlutter SDKは、Flutterでプログラミングするために必要な道具箱みたいなものです。これをコンピューターにインストール（取り付け）する必要があります。

 3.1 Flutter SDKのダウンロードFlutter公式サイトにアクセスします。
お使いのOSに合わせたインストール手順のページに移動します。
"Get the Flutter SDK" セクションを見つけ、SDKをダウンロードします。
Windows: flutter_windows_<version>-stable.zip

 3.2 Flutter SDKの展開ダウンロードしたZIPファイルを任意のディレクトリに解凍します。

C:\flutter (Windows)
解凍したフォルダ内に flutter というサブフォルダがあることを確認します。

 3.3 環境変数の設定Windowsの場合:
スタートメニューで「環境変数」と検索し、「システム環境変数の編集」を開きます。
「環境変数」ボタンをクリックします。
「システム環境変数」セクションで「Path」を選択し、「編集」をクリックします。
「新規」をクリックし、Flutterのbinディレクトリの完全パスを追加します（例：C:\src\flutter\bin）。
「OK」を3回クリックして変更を保存します。

※Path（パス）についてはこちら。

https://qiita.com/sta/items/63e1048025d1830d12fd
※完全パスとは（以下のYoutubeをご覧ください）

https://youtu.be/bjF2D2zF4QA

 3.4 インストールの確認新しいコマンドプロンプト/ターミナルウィンドウを開きます。
以下のコマンドを実行します：flutter --version
Flutterのバージョン情報が表示されれば、インストールは成功です。
成功例：
Flutter 2.10.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision c860cba910 (3 weeks ago) • 2022-03-25 00:23:12 -0500
Engine • revision 57d3bac3dd
Tools • Dart 2.16.2 • DevTools 2.9.2
注意: バージョン番号は実行時期により異なる場合があります。

 3.5 依存関係の確認とインストール以下のコマンドを実行します：flutter doctor
表示された結果を確認し、不足しているソフトウェアやツールをインストールします。
成功例：
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.10.4, on Microsoft Windows [Version 10.0.19044.1645], locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[✓] Chrome - develop for the web
[✓] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.11)
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.66.2)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

• No issues found!
注意:
初回実行時は、ほとんどの項目に [✗] や [!] マークが付いていることがあります。これは正常で、必要なツールをインストールすることで解決していきます。
Android Studio のインストールを促すメッセージが表示される場合があります。これらは後のステップでインストールします。
"No issues found!" が表示されなくても、必要最小限のツールがインストールされていれば開発を始めることができます。

 3.6 Flutterコマンドの動作確認以下のコマンドを実行して、Flutterコマンドが正しく動作することを確認します：flutter create my_first_app
cd my_first_app
flutter run -d chrome
成功例：
Launching lib\main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...
  Running with sound null safety

  ███████╗██╗     ██╗   ██╗████████╗████████╗███████╗██████╗
  ██╔════╝██║     ██║   ██║╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗
  █████╗  ██║     ██║   ██║   ██║      ██║   █████╗  ██████╔╝
  ██╔══╝  ██║     ██║   ██║   ██║      ██║   ██╔══╝  ██╔══██╗
  ██║     ███████╗╚██████╔╝   ██║      ██║   ███████╗██║  ██║
  ╚═╝     ╚══════╝ ╚═════╝    ╚═╝      ╚═╝   ╚══════╝╚═╝  ╚═╝

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

An Observatory debugger and profiler on Chrome is available at: http://127.0.0.1:12345/...

Application finished.
注意:
Chromeブラウザが自動的に起動し、デフォルトのFlutterアプリが表示されれば成功です。
初回実行時はダウンロードに時間がかかる場合があります。
エラーが発生した場合は、エラーメッセージを確認し、必要に応じて flutter doctor を再実行して問題を特定してください。

 4. VSCodeのインストール
Visual Studio Code公式サイトからVSCodeをダウンロードします。
ダウンロードしたインストーラーを実行し、画面の指示に従ってインストールします。
※インストーラーの実行については、以下参照しました。

https://zenn.dev/sdutio_terrace/articles/05da30b4c81dbc

 5. VSCodeの設定
 5.1 基本設定VSCodeを起動します。
左下の歯車アイコンをクリックし、「設定」を選択します。
検索バーに「flutter」と入力し、Flutter関連の設定を探します。
以下の設定を確認/変更します：
"Flutter: Sdk Path": Flutter SDKのパスが正しく設定されているか確認します。
"Dart: Line Length": Dartコードのフォーマット時の行の長さを設定します（推奨: 80 または 120）。
"Editor: Format On Save": トグルをオンにして、保存時に自動フォーマットを有効にします。

成功例：
"Flutter: Sdk Path" が正しく設定されている場合、パスが表示されます（例：C:\src\flutter）。
"Dart: Line Length" を 80 に設定すると、入力欄に "80" と表示されます。
"Editor: Format On Save" がオンの場合、チェックボックスにチェックが入ります。

 5.2 Flutter拡張機能のインストールVSCodeでFlutter開発を行うために、必要な拡張機能をインストールします。
VSCodeを起動します。
左側のサイドバーで拡張機能アイコン（四角が4つのアイコン）をクリックします。
検索バーに「Flutter」と入力します。
検索結果から以下の拡張機能を見つけ、「インストール」をクリックします：
「Flutter」（Dart Code著、公式Flutter拡張機能）
「Dart」（Dart Code著、Dart言語サポート）

インストールが完了したら、「再読み込み」をクリックしてVSCodeを再起動します。
追加の便利な拡張機能（オプション）：
「Awesome Flutter Snippets」：よく使うFlutterコードスニペットを提供
「Flutter Widget Snippets」：Flutterウィジェットのスニペットを提供
「Pubspec Assist」：pubspec.yamlファイルの依存関係管理を支援
これらの追加拡張機能をインストールする場合も、同様の手順でインストールできます。
成功例：
Flutter拡張機能がインストールされると、拡張機能の詳細ページに「アンインストール」ボタンが表示されます。
VSCodeのステータスバー（画面下部）に Flutter のバージョン情報が表示されます（例：Flutter 2.10.4）。
新しいFlutterプロジェクトを作成する際、コマンドパレット（Ctrl+Shift+P）で「Flutter: New Project」コマンドが利用可能になります。

 5.3 拡張機能の設定Flutter拡張機能をインストールした後、いくつかの設定を行うことで開発体験を向上させることができます。
VSCodeの設定を開きます（ファイル > 基本設定 > 設定、またはCtrl+,）。
検索バーに「flutter」と入力して、Flutter関連の設定を表示します。
以下の設定を確認し、必要に応じて変更します：
「Flutter: Sdk Path」：Flutter SDKのパスが正しく設定されているか確認します。
「Dart: Line Length」：Dartコードのフォーマット時の行の長さを設定します（推奨: 80 または 120）。
「Editor: Format On Save」：ファイル保存時に自動フォーマットを行うかどうかを設定します（推奨: オン）。
「Flutter: Hot Reload On Save」：保存時にHot Reloadを自動的に行うかどうかを設定します（推奨: オン）。
設定変更後、VSCodeを再起動して変更を適用します。
成功例：
「Flutter: Sdk Path」が正しく設定されている場合、パスが表示されます（例：C:\src\flutter）。
「Dart: Line Length」を80に設定すると、入力欄に "80" と表示されます。
「Editor: Format On Save」がオンの場合、チェックボックスにチェックが入ります。
これらの設定により、Flutter開発環境が最適化され、効率的なコーディングが可能になります。

 5.4 デバッグ設定デバッグビュー（左側のサイドバーでバグアイコン）を開きます。
歯車アイコンをクリックして launch.json ファイルを開きます。
以下のような設定を追加します：{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Flutter",
      "request": "launch",
      "type": "dart",
      "flutterMode": "debug"
    }
  ]
}
ファイルを保存します。

成功例：

launch.json ファイルが正しく設定されると、デバッグビューの上部にある実行構成ドロップダウンに "Flutter" オプションが表示されます。

 6. Flutterプロジェクトの作成
 6.1 新規プロジェクトの作成VSCodeを開きます。
コマンドパレットを開きます（Ctrl+Shift+P または Cmd+Shift+P）。
"Flutter: New Project" と入力し、選択します。
プロジェクトの種類を選択します（例：Application）。
プロジェクトを保存するフォルダを選択します。
プロジェクト名を入力します（例：my_first_flutter_app）。
成功例：
プロジェクトが正常に作成されると、VSCodeの Explorer ビューに新しいプロジェクトフォルダが表示されます。

lib/main.dart ファイルが自動的に開かれ、基本的なFlutterアプリのコードが表示されます。

 6.2 プロジェクト構造の確認新しく作成されたプロジェクトには以下のような構造が含まれています：
my_first_flutter_app/
├── .dart_tool/
├── .idea/
├── android/
├── ios/
├── lib/
│   └── main.dart
├── test/
├── .gitignore
├── .metadata
├── .packages
├── my_first_flutter_app.iml
├── pubspec.lock
├── pubspec.yaml
└── README.md
主要なファイルとフォルダ：

lib/main.dart: アプリケーションのメインエントリーポイント

pubspec.yaml: プロジェクトの依存関係とアセットを管理

android/ と ios/: プラットフォーム固有の設定とコード

test/: ユニットテストとウィジェットテスト用のディレクトリ

 6.3 プロジェクトの実行
lib/main.dart ファイルを開きます。
右上の "Run" ボタン（再生アイコン）をクリックします。
デバイス選択のプロンプトが表示されたら、使用するデバイス（例：Chrome）を選択します。
成功例：
アプリケーションが正常に起動すると、選択したデバイス（ブラウザやエミュレータ）にデフォルトのFlutterアプリが表示されます。
VSCodeの下部にあるデバッグコンソールに以下のようなメッセージが表示されます：
Launching lib\main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...
This app is linked to the debug service: ws://127.0.0.1:12345/...
Debug service listening on ws://127.0.0.1:12345/...

 6.4 Hot Reload の使用
lib/main.dart ファイル内の 'You have pushed the button this many times:' というテキストを変更します（例：'ボタンを押した回数:'）。
ファイルを保存します（Ctrl+S または Cmd+S）。
実行中のアプリケーションを確認します。
成功例：
テキストの変更がすぐにアプリケーションに反映されます。
デバッグコンソールに以下のようなメッセージが表示されます：
Reloaded 1 of 613 libraries in 301ms.

 7. Android Studioエミュレータの設定
 7.1 Android エミュレータの設定
 7.1.1 Android Studio のインストール
Android Studio の公式サイト からインストーラーをダウンロードします。
ダウンロードしたインストーラーを実行し、画面の指示に従ってインストールを完了します。
インストール中に "Android Virtual Device" オプションが選択されていることを確認します。
成功例：
インストールが完了すると、Android Studio の起動画面が表示されます。
※Android Studio のインストール手順については以下参照しました。

https://qiita.com/okada_ryo/items/0434ccf8d66f7859f75c

 7.1.2 Android SDK のセットアップAndroid Studio を起動します。
"More Actions" または "Configure" をクリックし、"SDK Manager" を選択します。
"SDK Platforms" タブで、使用したい Android バージョン（例：Android 11.0）にチェックを入れます。
"SDK Tools" タブで、以下の項目にチェックを入れます：
Android SDK Build-Tools
Android Emulator
Android SDK Platform-Tools

"Apply" をクリックし、選択したコンポーネントをダウンロード・インストールします。
成功例：
インストールが完了すると、選択したコンポーネントの "Status" 列に "Installed" と表示されます。

 7.1.3 Android 仮想デバイスの作成Android Studio で "More Actions" または "Configure" をクリックし、"AVD Manager" を選択します。
"Create Virtual Device" をクリックします。
デバイス定義（例：Pixel 4）を選択し、"Next" をクリックします。
システムイメージ（例：R）を選択し、必要に応じてダウンロードします。
AVD の名前を確認または変更し、"Finish" をクリックします。
成功例：
作成した仮想デバイスが AVD Manager のリストに表示されます。
仮想デバイスの横にある再生ボタンをクリックすると、エミュレータが起動します。

 7.2 iOS シミュレータの設定（macOS のみ）
 7.2.1 Xcode のインストールApp Store から Xcode をインストールします。
インストールが完了したら、Xcode を起動し、追加コンポーネントのインストールを許可します。
成功例：
Xcode が正常に起動し、"Welcome to Xcode" 画面が表示されます。

 7.2.2 コマンドラインツールの設定ターミナルを開きます。
以下のコマンドを実行します：sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
成功例：
コマンドが正常に実行され、エラーメッセージが表示されません。

 7.2.3 iOS シミュレータの起動ターミナルで以下のコマンドを実行します：open -a Simulator
シミュレータが起動したら、"File" > "Open Simulator" から別のデバイスを選択できます。
成功例：
iOS シミュレータが起動し、選択したデバイスの画面が表示されます。

 8. Hello World アプリの実行
 8.1 プロジェクトの準備VSCode を開きます。
先ほど作成した Flutter プロジェクト（例：my_first_flutter_app）を開きます。

lib/main.dart ファイルを開きます。

 8.2 コードの修正
lib/main.dart ファイルの内容を以下のコードに置き換えます：
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello World App'),
        ),
        body: Center(
          child: Text(
            'Hello, World!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}
ファイルを保存します（Ctrl+S または Cmd+S）。

 8.3 アプリの実行VSCode の下部にあるステータスバーで、デバイス選択ドロップダウンをクリックします。
使用するデバイス（Android エミュレータ、iOS シミュレータ、または物理デバイス）を選択します。
F5 キーを押すか、"Run" > "Start Debugging" を選択してアプリを実行します。
成功例：
選択したデバイス上でアプリが起動します。
"Hello World App" というタイトルのアプリバーと、中央に "Hello, World!" というテキストが表示されます。
デバッグコンソールに以下のようなメッセージが表示されます：
Launching lib\main.dart on Android SDK built for x86 in debug mode...
✓ Built build\app\outputs\flutter-apk\app-debug.apk.
Connecting to VM Service at ws://127.0.0.1:12345/...

 8.4 Hot Reload の確認
lib/main.dart ファイルの 'Hello, World!' テキストを変更します（例：'こんにちは、世界！'）。
ファイルを保存します。
実行中のアプリを確認します。
成功例：
テキストの変更がすぐにアプリに反映されます。
デバッグコンソールに Hot Reload の完了を示すメッセージが表示されます：
Reloaded 1 of 613 libraries in 198ms.

 8.5 デバッグの基本
lib/main.dart ファイルの Text ウィジェットを含む行の左側の余白をクリックしてブレークポイントを設定します。
アプリを再起動します（Ctrl+Shift+F5 または Cmd+Shift+F5）。
アプリが起動し、ブレークポイントで実行が一時停止します。
VSCode のデバッグビューでローカル変数やコールスタックを確認します。
F5 キーを押して実行を再開します。
成功例：
ブレークポイントで実行が一時停止し、VSCode のデバッグビューに変数情報が表示されます。
F5 キーを押すと、アプリの実行が再開されます。

 9. Git を使用した Flutter バージョン管理※Gitのインストールについては以下参照しました。

https://zenn.dev/hogehara/articles/d10b9b272072b9

 9.1 現在の Flutter バージョンの確認コマンドプロンプト（Windows）またはターミナル（macOS/Linux）を開きます。
以下のコマンドを実行します：
flutter --version
成功例：
Flutter 2.10.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision c860cba910 (3 weeks ago) • 2022-03-25 00:23:12 -0500
Engine • revision 57d3bac3dd
Tools • Dart 2.16.2 • DevTools 2.9.2

 9.2 Flutter チャンネルの切り替え利用可能なチャンネルを確認するために、以下のコマンドを実行します：
flutter channel
成功例：
Flutter channels:
  master
  dev
  beta
* stable
別のチャンネルに切り替えるには、以下のコマンドを実行します（例：beta チャンネルに切り替え）：
flutter channel beta
新しいチャンネルの最新バージョンに更新するために、以下のコマンドを実行します：
flutter upgrade
成功例：
Switching to flutter channel 'beta'...
Upgrading Flutter to 2.13.0-0.1.pre from 2.10.4...
Downloading engine...
Downloading android-arm-profile/darwin-x64 tools...
Downloading android-arm-release/darwin-x64 tools...
Downloading android-arm64-profile/darwin-x64 tools...
Downloading android-arm64-release/darwin-x64 tools...
Downloading android-x64-profile/darwin-x64 tools...
Downloading android-x64-release/darwin-x64 tools...
Downloading android-x86-profile/darwin-x64 tools...
Downloading android-x86-release/darwin-x64 tools...
Downloading package sky_engine...
Downloading flutter_patched_sdk tools...
Downloading flutter_patched_sdk_product tools...
Downloading darwin-x64 tools...
Downloading libimobiledevice...
Downloading usbmuxd...
Downloading libplist...
Downloading openssl...
Downloading ios-deploy...
Downloading darwin-x64/font-subset tools...
Upgrading engine...
Upgrading package sky_engine...
Upgrading flutter tool...
Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, 2.13.0-0.1.pre, on macOS 12.3.1 21E258 darwin-x64, locale en-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 13.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.1)
[✓] VS Code (version 1.66.2)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

• No issues found!

 9.3 特定の Flutter バージョンへの切り替え特定のバージョンに切り替えるには、まず該当するバージョンのタグを確認します：
git tag -l
目的のバージョンが見つかったら、以下のコマンドで切り替えます（例：2.10.3 に切り替え）：
flutter downgrade 2.10.3
成功例：
Switching Flutter to version 2.10.3
Downloading engine...
Downloading android-arm-profile/darwin-x64 tools...
Downloading android-arm-release/darwin-x
64 tools...
Downloading android-arm64-profile/darwin-x64 tools...
Downloading android-arm64-release/darwin-x64 tools...
Downloading android-x64-profile/darwin-x64 tools...
Downloading android-x64-release/darwin-x64 tools...
Downloading android-x86-profile/darwin-x64 tools...
Downloading android-x86-release/darwin-x64 tools...
Downloading package sky_engine...
Downloading flutter_patched_sdk tools...
Downloading flutter_patched_sdk_product tools...
Downloading darwin-x64 tools...
Downloading libimobiledevice...
Downloading usbmuxd...
Downloading libplist...
Downloading openssl...
Downloading ios-deploy...
Downloading darwin-x64/font-subset tools...
Downloading material_fonts tools...
Downloading gradle_wrapper tools...
Flutter 2.10.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 7e9793dee1 (3 months ago) • 2022-03-02 11:23:12 -0600
Engine • revision bd539267b4
Tools • Dart 2.16.1 • DevTools 2.9.2

 9.4 プロジェクト固有の Flutter バージョンの設定プロジェクト固有の Flutter バージョンを設定するには、プロジェクトの pubspec.yaml ファイルを編集します：
VSCode で pubspec.yaml ファイルを開きます。

environment セクションに sdk の制約を追加または編集します：
environment:
  sdk: ">=2.16.0 <3.0.0"
  flutter: ">=2.10.0 <3.0.0"
ファイルを保存します。
ターミナルで以下のコマンドを実行して、依存関係を更新します：
flutter pub get
成功例：
Running "flutter pub get" in my_flutter_project...
Resolving dependencies...
Got dependencies!

 10. トラブルシューティング
 10.1 Flutter Doctor の活用以下のコマンドを実行して、Flutter の診断を行います：
flutter doctor -v
出力を確認し、警告やエラーメッセージに注目します。
成功例（全て問題ない場合）：
[✓] Flutter (Channel stable, 2.10.4, on Microsoft Windows [Version 10.0.19043.1645], locale en-US)
    • Flutter version 2.10.4 at C:\src\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c860cba910 (3 weeks ago), 2022-03-25 00:23:12 -0500
    • Engine revision 57d3bac3dd
    • Dart version 2.16.2
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at C:\Users\YourUsername\AppData\Local\Android\sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.11+9-b60-7590822)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.11)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.11.32228.343
    • Windows 10 SDK version 10.0.19041.0

[✓] Android Studio (version 2021.1)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.11+9-b60-7590822)

[✓] VS Code (version 1.66.2)
    • VS Code at C:\Users\YourUsername\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.38.1

[✓] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19043.1645]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 100.0.4896.75
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 100.0.1185.36

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

 10.2 よくある問題と解決方法
 10.2.1 "Flutter command not found" エラーFlutter SDK のパスが環境変数に正しく設定されているか確認します。
コマンドプロンプト/ターミナルを再起動します。
それでも解決しない場合は、システムを再起動します。

 10.2.2 Gradle ビルドエラー以下のコマンドでプロジェクトをクリーンします：
flutter clean
依存関係を再度取得します：
flutter pub get
Gradle を更新します：
flutter packages upgrade
成功例：
Running "flutter pub get" in my_flutter_project...
Resolving dependencies...
Got dependencies!

 10.2.3 VSCode で Flutter 拡張機能が動作しないVSCode を完全に終了します。
VSCode の設定フォルダを削除します：
Windows: %APPDATA%\Code
VSCode を再起動し、Flutter 拡張機能を再インストールします。

 10.2.4 Hot Reload が機能しないアプリを停止します。
以下のコマンドでキャッシュをクリアします：
flutter clean
アプリを再度実行します。

 10.3 コミュニティリソースの活用
Flutter GitHub Issues で既知の問題を検索します。

Stack Overflow の Flutter タグ で質問や回答を探します。

Flutter Discord サーバー に参加して、リアルタイムでヘルプを求めます。
以上で、Flutter環境構築マニュアル（VSCode用）は完了です。このマニュアルを参考に、Flutterの開発環境をセットアップし、最初のアプリケーションを作成してください。問題が発生した場合は、トラブルシューティングセクションを参照するか、コミュニティリソースを活用してください。

 11. 感想知識なさ過ぎて、難しかったです。

知識ある方に助けていただきながらでしたが、その方も「環境構築が一番嫌い」と仰ってました。
ずーっと動かなくて、実働2日ほどかかりましたが、最終的にGitでバージョン下げたらあっさり動きました。
周りの詳しい方は、「そんなもん」と言ってました。

そんなもんでした。
Happy!👍
Flutter環境構築

そもそもFlutterとは

そもそもVscodeとは

そもそもAndroid Studioとは

目次

1. 前提条件

2. コマンドプロンプト/ターミナルの基本

3. Flutter SDKのインストール

3.1 Flutter SDKのダウンロード

3.2 Flutter SDKの展開

3.3 環境変数の設定

3.4 インストールの確認

3.5 依存関係の確認とインストール

3.6 Flutterコマンドの動作確認

4. VSCodeのインストール

5. VSCodeの設定

5.1 基本設定

5.2 Flutter拡張機能のインストール

5.3 拡張機能の設定

5.4 デバッグ設定

6. Flutterプロジェクトの作成

6.1 新規プロジェクトの作成

6.2 プロジェクト構造の確認

6.3 プロジェクトの実行

6.4 Hot Reload の使用

7. Android Studioエミュレータの設定

7.1 Android エミュレータの設定

7.1.1 Android Studio のインストール

7.1.2 Android SDK のセットアップ

7.1.3 Android 仮想デバイスの作成

7.2 iOS シミュレータの設定（macOS のみ）

7.2.1 Xcode のインストール

7.2.2 コマンドラインツールの設定

7.2.3 iOS シミュレータの起動

8. Hello World アプリの実行

8.1 プロジェクトの準備

8.2 コードの修正

8.3 アプリの実行

8.4 Hot Reload の確認

8.5 デバッグの基本

9. Git を使用した Flutter バージョン管理

9.1 現在の Flutter バージョンの確認

9.2 Flutter チャンネルの切り替え

9.3 特定の Flutter バージョンへの切り替え

9.4 プロジェクト固有の Flutter バージョンの設定

10. トラブルシューティング

10.1 Flutter Doctor の活用

10.2 よくある問題と解決方法

10.2.1 "Flutter command not found" エラー

10.2.2 Gradle ビルドエラー

10.2.3 VSCode で Flutter 拡張機能が動作しない

10.2.4 Hot Reload が機能しない

10.3 コミュニティリソースの活用

11. 感想

Discussion
