FlutterのHot reloadで変更が反映されない時に確認すべき2つのこと【VSCode版】

はじめに

Flutterを使い始めた時にコードを変更しても「あれ？Hot reloadで変更が反映されないぞ」となったことが、何度かあってヤキモキしたので、その時に調査したことをまとめておきます。

確認事項① VSCodeのStart Debuggingから起動しているか

Flutterのシミュレーターを起動するコマンドとしてflutter runがありますが、これだとHot reloadが動作しません。

以下の通り「Run > Start Debugging」から起動するとデバッグモードになり、Hot reloadが有効になります。

flutter run --debugでも良いのではと思ったのですが、こちらでは上手く動作しませんでした。

確認事項② Widgetのbuild関数内で実行される変更をしているか

これが自分がハマっていた点でした。

Hot reloadはアプリの状態(State)を保持してWidgetのbuild関数を再実行し、変更を反映します。

クラスのstatic変数は再読み込みされず、前回の値が保持されたままになるため反映されません。

Flutterを学び始めた時に以下のようなコードを書いてしまっていて、
todayWeightのテキストを変更してもHot reloadで反映されないという現象にハマっていました。

class HomePage extends StatelessWidget {
  static final todayWeight = Row(children: [
    Container(
      margin: EdgeInsets.only(right: 15),
      child: Text('今日の体重', style: TextStyle(fontSize: 25)),
    ),
    Text(
      '72kg',
      style: TextStyle(fontSize: 30),
    ),
  ]);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
            padding: EdgeInsets.only(top: 20, left: 40), child: todayWeight));
  }
}

以下のようにbuild関数内に書くようにすると直ります。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final todayWeight = Row(children: [
      Container(
        margin: EdgeInsets.only(right: 15),
        child: Text('今日の体重', style: TextStyle(fontSize: 25)),
      ),
      Text(
        '72kg',
        style: TextStyle(fontSize: 30),
      ),
    ]);

    return Scaffold(
        body: Container(
            padding: EdgeInsets.only(top: 20, left: 40), child: todayWeight));
  }
}

Hot restartの使い方

ちなみにstatic変数の変更を反映したい場合は、Hot restartを使います。

Hot reloadはウィジェットツリーの再ビルドのみでしたが、Hot restartではクラスも再度読み込まれるのでstatic変数の変更も反映されます。

VSCodeでは「↑⌘F5」のコマンドで実行できます。

おわりに

今回まとめた2点を把握していれば、Hot reloadの挙動でハマることはないかと思います。
Hot restartもたまに使う必要がある時があると思うので、ぜひ覚えて活用してみてください！

参考にした記事

https://flutter.dev/docs/development/tools/hot-reload
https://qiita.com/Statham/items/46812e0aab4862d44709