Visual Studio CodeでFlutterの新規プロジェクトを作成する

前回まででFlutter環境の設定ができました。

当初は、Android StudioとAndroidエミュレータで作業をしようと思っていたけれど、AndroidStudioもエミュレータも死ぬほど遅いんです。

使っているマシンは、Macmini（2014）をCatalina（10.15.7）にアップデートしたマシン。Core i5のメモリ8MBです。

メモリ8MBは、もうかなりショボくて、おまけにMacminiのハードディスクも遅くて、悲しいかなどうにもなりません。

エミュレーター対策に、HAXMは入れました。
Hipervisor Frameworkも対応しています。
ウイルスチェッカーも影響すると言うので、逐一チェックされないようにしてみました。

でも遅いんです。もうやだー！

なので、とりあえずVSCodeと実機という組み合わせでやってみることにしました。

というわけで今回は、MacのVSCodeでFlutterの新規プロジェクトを作成して、ホットリロードまでやってみます。

実機は、Nexus5を使います。

VSCodeのNewApplication Project

まずは、VSCodeのメニューから［表示］＞［コマンドパレット］を選びます。

次の画面で、Flutter: NewApplication Projectを選びますが、テキスト入力エリアで「flutter」と打つと検索して下に表示されるので、その中から選ぶのがラクです。

このあと、プロジェクトを作成するフォルダの選択画面が出るので、任意のフォルダを選んだら、次の画面でプロジェクト名を入力します。

ここでは、デフォルトの「flutter_application_1」のままで進みました。

すると、プロジェクトが作成されていきます。

少し待つと、画面左側のエクスプローラーに表示されたフォルダでmain.dartが選択され、画面右側のエディタにそのコードが表示されます。

この段階では、まだ実機をつないでなかったので、画面右下には「NoDevice」と表示されています。

ここで実機をUSBケーブルで繋ぐと、Nexus5の設定は予めやってあったので画面下にもちゃんと表示されました。

ここまでで、新規のプロジェクトの作成ができました。

Flutter プロジェクトのデバッグ実行

この新規プロジェクトはサンプルのアプリケーションになっているので、このまま何もせずにコードを走らせれば、アプリが実行されます。

画面右上の、三角に虫がついたマークをクリックしてデバッグを開始します。
もしくはメニューから［実行］＞［デバッグの開始（F5）］です。

最初の実行には、終わるまで少し時間がかかります。
画面の下の、デバッグコンソール画面とステータスバーに、実行状況が表示されるのでちょっと待ちます。（いや、かなり待ちます）

おっと！　モニタの右上にメッセージが出て、途中で止まってしまいました。

ウイルスバスター forMacが入っているので、それが機能して、フォルダへのアクセスが弾かれてしまったようです。

慌てず騒がず、「詳細の表示…」でウイルスバスター forMacのログ画面を開いてフォルダアクセスの許可リストに、このプロジェクトのフォルダを追加します。

再度、デバッグ実行します。

処理が終わると、Nexus5に表示されました。

右下のボタンをタップすると、ちゃんとアプリが動いてカウントもされます。

プロジェクトを修正してホットリロードを実行

Flutter では、ホットリロードが標準です。
最初の実行にはかなり時間がかかりましたが、ホットリロードなら、その後の修正の反映には時間はかかりません。

アプリの画面中央にある英文を、次のように「ボタンを押してね」と日本語に変更してみました。

ホットリロードは、画面上のホットリロードのボタンか、あるいはメニュー［ファイル］＞［すべて保存］です。

すると、即座にアプリ画面に反映されました。

これで、基本動作の確認ができました。