Flutterのホットリロード機能をVS Codeで利用する方法

Flutter

Flutterのプロジェクトを作成して、確かホットリロード対応だったよな、と思いflutter runしてソースを改変してみたのですが、エミュレーターに反映されませんでした。
え、出来ないんだっけと思い調べた結果を記します。

開発におけるホットリロードとは?

ソースコードの改変をリアルタイムで監視してくれて、修正を加えてファイルを保存した時点でエミュレーターに即時(Flutterはちょっとラグが長め)反映してくれる便利な機能です。

一度ホットリロードを知ってしまうと他の開発が億劫になるくらい重宝しています。

React Nativeでもホットリロードが採用されていて、アプリケーションを実行した後にソースを修正すると即時に内容が反映されます。

React NativeとFlutter両方を触った感じでは、圧倒的にReact Nativeの方が高速で反映されます。(React NativeはJavaScriptだから早いのかな)

Visual Studio CodeでFlutterのホットリロードが効かない

問題のVS CodeでのFlutterのホットリロードですが、ターミナルからのflutter runでは適用されません。結論を言うとVS Codeのデバッグモードでアプリを起動しないとホットリロードを利用出来なようです。

試しにターミナルからflutter runしてアプリのtitleを変えてファイルを保存してみてください。たぶんエミュレーターの表示は変わらないはずです。

では、どうすればVS CodeでFlutterアプリをデバッグモードで実行出来るのでしょうか。

デバッグモードで実行は「F5」キーが最も効率的で爆速

いろんなサイトを見てみると、ちょこちょこCtrl + Shift + Pでコマンドパレット開いて「flutter」って入力して、「Debug: Attach to Flutter on Device」を選択……と書いてありがちですが、そんなことする必要はありません。「F5」キーで立ち上がります。

VS Codeの「実行(R)」メニューをクリックすると「デバッグの開始 F5」とプルダウンに表示されますね。

既にターミナルでflutter runしてしまっている場合はCtrl + Cでrunを停止してから、F5キーを押してみてください。もちろんエミュレーターを起動している状態でF5です。

ちなみにデバッグモードで実行するとVS Codeの一番下のエリアがオレンジ色になります。flutter runで実行すると青色ですね。

デバッグモードではオレンジ色になる

まとめ

  • VS CodeでFlutterのホットリロードを利用するときはデバッグモードでアプリを実行
  • デバッグモードで起動にはF5キーを活用して効率化

一応今回行った際のVS Codeのバージョン情報を載せておきます。

バージョン: 1.64.2 (user setup)
コミット: f80445acd5a3dadef24aa209168452a3d97cc326
日付: 2022-02-09T22:02:28.252Z
Electron: 13.5.2
Chromium: 91.0.4472.164
Node.js: 14.16.0
V8: 9.1.269.39-electron.0
OS: Windows_NT x64 10.0.22000
タイトルとURLをコピーしました