Flutter+VSCode開発環境

tezyun

VSCode開く（管理者権限で）

拡張機能で「Flutter」といれる

検索結果をインストール

SHFT+CTRL+Pで入力欄開いて「Flutter: New Project」と入力

SDKダウンロードを促されるのでProgram filesとか適当な所に作っとく

しばらくするとVSCodeでFlutterDoctorが起動するので様子見

完了するとAdd SDK Path（内容として環境変数を自動で編集していいか？）ってきかれるので、OKを♂

flutter doctor　とコマンドするだけで、問題がある場合は表示してくれる

Windowsアプリを出すためにはVisualStudioが必要らしい

Launching lib/main.dart on Windows in debug mode...

Error: Unable to find suitable Visual Studio toolchain. Please run flutter doctor for more details.

Exited (1).

ですね。

これは、FlutterがWindowsでデバッグモードで起動しようとした際に、 適切なVisual Studioツールチェーンが見つからない というエラーです。

flutter doctor コマンドを実行して、詳細を確認するように指示しています。

このエラーは、通常、 Visual Studioが正しくインストールされていないか、FlutterがVisual Studioのインストールパスを認識できない 場合に発生します。

解決策としては、以下の3つが考えられます。

Visual Studioをインストールする

まだVisual Studioをインストールしていない場合は、Visual Studioの公式サイトからダウンロードしてインストールしてください。FlutterでWindowsアプリを開発するには、 C++によるデスクトップ開発 ワークロードを含むVisual Studioが必要です。

FlutterにVisual Studioのパスを教える

FlutterがVisual Studioのインストールパスを認識できない場合は、flutter config --vs-path コマンドを使って、Visual StudioのインストールパスをFlutterに教える必要があります。

例： flutter config --vs-path "C:\Program Files (x86)\Microsoft Visual Studio\2022\Community"

flutter doctorを実行して問題を診断する

flutter doctorコマンドを実行すると、Flutterの開発環境に問題がないか診断してくれます。エラーメッセージが表示された場合は、メッセージに従って問題を解決してください。

これらの解決策を試して、エラーが解消されるか確認してみてください。

参考

FlutterとVSCodeの開発環境構築手順ですね！VSCodeがインストール済みとのことなので、以下の手順で進めていきましょう。

1. Flutter SDKのインストール

Flutterの公式サイトから、最新の安定版SDKをダウンロードします。

Flutter SDKのダウンロード

ダウンロードしたzipファイルを解凍し、任意の場所に配置します。（例：C:\src\flutter）

2. 環境変数の設定

Flutterのコマンドをどこからでも実行できるように、環境変数 PATH にFlutterの bin ディレクトリを追加します。

Windowsの場合:

「システムの詳細設定」を開き、「環境変数」をクリックします。

システム環境変数の Path を選択し、「編集」をクリックします。

「新規」をクリックし、Flutterの bin ディレクトリのパス（例：C:\src\flutter\bin）を追加します。

macOS/Linuxの場合:

シェル設定ファイル（例：~/.bashrc, ~/.zshrc）に以下の行を追加し、ターミナルを再起動します。 <!-- end list -->

Bash

コードは注意してご使用ください。

3. flutter doctorの実行

コマンドプロンプトまたはターミナルで flutter doctor を実行します。

必要なツールがインストールされているか、設定に問題がないかを確認します。

エラーや警告が表示された場合は、メッセージに従って対応します。

Android Studioのインストールや、Android SDKの設定が必要になる場合があります。

4. VSCodeの拡張機能をインストール

VSCodeを起動し、拡張機能ビューを開きます。

"Flutter" と検索し、「Flutter」拡張機能をインストールします。

これにより、「Dart」拡張機能も自動的にインストールされます。

5. デバイスの準備

Androidエミュレータ:

Android Studioをインストールし、AVD Managerからエミュレータを作成します。

iOSシミュレータ:

macOSが必要です。Xcodeをインストールし、シミュレータを起動します。

実機:

Android: USBデバッグを有効にします。

iOS: 開発者モードを有効にし、Xcodeでペアリングします。

6. プロジェクトの作成

VSCodeで、「表示」>「コマンドパレット」を開きます。

「Flutter: New Project」を選択し、プロジェクト名を入力します。

プロジェクトの保存場所を選択し、Enterキーを押します。

7. アプリの実行

作成したプロジェクトを開き、 main.dart を編集します。

VSCodeの右下で、実行するデバイスを選択します。

「デバッグの開始」ボタンをクリックして、アプリを実行します。

これで、FlutterとVSCodeを使った開発環境が構築できました！

補足

より詳細な情報やトラブルシューティングについては、Flutterの公式ドキュメントを参照してください。

Flutterのインストール

Android Studioのインストールや設定が難しい場合は、Flutterの公式サイトで紹介されている、Android Studioを使わないセットアップ方法を試すこともできます。

エラーが発生した場合は、エラーメッセージをコピーしてWeb検索すると、解決策が見つかることが多いです。

快適なFlutter開発ライフをお楽しみください！

あとでやる

Flutter Doctor の警告メッセージですね。

これは、Flutter で Windows アプリを開発するために必要なコンポーネントが Visual Studio にインストールされていないことを示しています。

具体的には、以下のコンポーネントが不足しているようです。

MSVC v142 - VS 2019 C++ x64/x86 build tools: C++ のコードをコンパイルするためのビルドツールです。複数のバージョンがある場合は、最新バージョンをインストールする必要があります。

C++ CMake tools for Windows: CMake を使って C++ プロジェクトをビルドするためのツールです。

Windows 10 SDK: Windows 10 アプリケーションを開発するための SDK です。

これらのコンポーネントをインストールするには、以下の手順に従ってください。

Visual Studio Installer を起動する: スタートメニューから「Visual Studio Installer」を検索して起動します。

「変更」を選択: インストール済みの Visual Studio のエディションを選択します。「変更」ボタンをクリックします。

「個別のコンポーネント」タブを選択: 「個別のコンポーネント」タブを選択します。

必要なコンポーネントを選択: 上記の不足しているコンポーネントにチェックを入れます。

「変更」ボタンをクリック: 「変更」ボタンをクリックして、コンポーネントをインストールします。

インストールが完了したら、もう一度 flutter doctor を実行して、警告が消えているか確認してください。