[Flutter] VSCode 初めてのプロジェクト作成

Flutter でプロジェクトを新規に作成するのは、Android Studioでも可能ですが
VSCodeが軽くていいのとGoogleの推奨でもあります

New Project

　　

プロジェクト作成

　

VSCodeを起動します

メニューから「View」「Command Palette」

 

flutter と入力
候補が出てくるので
flutter: New Project
を選択

 

次に、which Flutter template?
と出てくるのでとりあえず
Application
を選択
そのほかにも用途に合わせたテンプレートがあります

 

プロジェクトを保存する先を指定します

指定したら「Select a folder to create the projection in」をクリック

プロジェクト名を決めます
ここでは推奨で出てきた、flutter_application_1 にします

 

プロジェクトが作成されました

仮想デバイスで実行

　

実行させるDeviceを決めます
右下隅に「No Device」とあるのでそれをクリック

 

 

Chrome

現状使えるデバイスがリストアップされます
とりあえず「Chrome」でやってみましょう

 

メニューの「Run」「Start Debugging」をクリック

 

Chromeで実行されています
ボタンクリックで数字が増えていきます

 

Android Studio エミュレータ

Android Studio でエミュレータを作成してあればこのリストに上がります
エミュレータの作成は以下を参考に；
　

　

Pixel 8 API 35 を選択して実行してみます

自動ではADBを呼び出せないので設定をマニュアルでやらないとできないというワーニングが出てきました

 

この Extended Controls がどこか悩んだんですが、エミュレータの設定でした
エミュレータの右側にメニュー表示されている一番下の「…」アイコンから
「Settings」そして「Use detected ADB location」

これが自動に設定されているのではずします

 

オフにするとロケーションを探すためのフォルダアイコンが出てきます

 

adbの場所はパス設定をするときにやっていると思います
　

　

adb を選択して「Open」

自動設定はオフのままです

これで Pixel 8 で実行してみると

エミュレータでアプリが実行されました

iOS Simulator

今度はiOSシミュレータで実行してみましょう

Xcodeでシミュレータを動かしてないとエラーになることがあるようなので
一度は起動させておきます

「Start iOS Simulator」を選択してRunすると

 

iOSシミュレータが起動しアプリが実行されました

ホットリロード

例えば、テキスト内容を変えてレイアウトを確認するなどでも
再度一から実行、Runさせると時間がかかります
そういうケースではホットリロードが使えます

VSCodeで一度コードを実行させると
雷アイコンが現れます

これを実行させると、簡単にコードの修正を確認できます

 

ただし、ホットリロードでは、
Widgetの再構築をするだけなので
initState()などのメソッドは実行されないので注意です

実機で実行

　

Androidデバイスは開発用の設定が必要です
　

　
実機で実行させてみると
Pixel 6a でできました