VSCodeでFlutterプロジェクトを作って実機デバッグするまでを解説
2020/07/14
前回の記事でUbuntu20.04にFlutterの開発環境を構築したところまで書きました。今回はVSCodeでFlutterプロジェクトを作って実機デバッグするまでを解説します。
なぜ、Android StudioではなくVSCodeかというと、両方使ってみてやはりVSCodeの方が軽快だったからです。あと、なぜAVDではなく実機を使うかというと僕のパソコンではAVDはクソ重いので諦めました。Corei5/8GBというそこそこのマシン使っているんですけどね。AVDの敷居は高い…。
ただ、実機デバッグを使ってみてわかったのは実機でもかなり軽快だしVSCodeで保存するだけで即座に反映（←これは知らなかった..）されるので違和感なく使えます。わざわざクソ重いAVDを使う理由が全くなくなったというのが結論。
それでは本題です。
VSCodeでFlutterプロジェクトを作る
VSCodeのメニューから「表示」−「コマンドパレット」を選択します。
以下のような窓が現れるので、「flutter」と打ってみましょう。すると「Flutter: New Project」と現れるのでそれを選択します。
プロジェクト名を聞いてきます。任意の名前となりますが、とりあえず「hello_world」と。
プロジェクトの保存先を聞いてきます。任意のフォルダを指定しましょう。（僕はDropbox内にFlutterProject）というフォルダを予め作っておいた。）
しばらくするとプロジェクトが生成されます。右下に生成中の状態が見れます。
以下のような状態になればOK。サンプルコードが生成されるので今回はこのままビルドして実機で確認してみたいと思います。
実機の接続
次に実機を接続しましょう（別に最初にやっておいてもいいのだけど…）。
これについては以下の記事にまとめているので、それを参考にして実施してください。
実機をVSCodeから認識させる
VSCode側の設定で接続した実機を認識させます。メニューから「ターミナル」−「新しいターミナル」を選択します。
下にターミナルが現れるので flutter build apk と打ちましょう。実機を認識しようと動きます。
完了したら本当に認識できたか確認します。flutter devices と打つと実機の情報が出力されるので確認しましょう。
デバッグ（実機で確認）
それではサンプルコードを実機で動かしてみましょう。メニューから「実行」−「デバッグの開始」を選択しましょう。
ビルドに１分ほどかかりましたが無事実機でアプリが起動しました。（↓画質悪！）
ちなみに実機デバッグ中はVSCodeの丈夫に以下のようなボタンバーが現れます。
実機は軽快でいいぞ！
今まで勘違いしていたのですが、いちいちビルドしないと実機に反映されないのだと思っていたら、VSCode側で保存したらすぐに反映されるみたいです。ちょっとビックリしました。
下の図は、左がデフォルトのサンプルコード、右が少しいじった結果です。VSCodeを少し修正して保存するたびに実機側もサクサク反映されてくれました。
こりゃ下手にAVD使うより実機デバッグの方が快適だなと思いデバッグ用の中古スマホをヤフオクで購入しようと思った次第です。
スポンサーリンク