How to detect hot reload inside the code of a Flutter App?

Question

I have an asset file that need to be processed before it can be used. This asset file will be heavily edited and I would like to not to have to restart the application each time I make an edit.

I'm aware of the existence of the reassemble method on the State class. However, this requires having a dummy widget that overrides this method and putting it inside the app somewhere to get notified about hot reload.

class WdHotReloadNotifier extends StatefulWidget
{
  final Function callback;
  WdHotReloadNotifier(this.callback);
  @override
  State<StatefulWidget> createState() => WdHotReloadNotifierState(this.callback);
}
class WdHotReloadNotifierState extends State<WdHotReloadNotifier>
{
  Function callback;
  WdHotReloadNotifierState(this.callback);
  @override
  void reassemble()
  {
    super.reassemble();
    callback();
  }
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Then I can use it like this:

WdHotReloadNotifier((){print("HOT REALOADED 1");}),
WdHotReloadNotifier((){print("HOT REALOADED 2");}),

However, adding these to a single page means that it will work as long as the page is in the stack. And adding them to multiple pages means the hooks will execute more than once.

Is there a way in flutter to get notified globally about a hot reload?

Answer 1

Overriding the reassemble method on a State subclass is what you want. But you can position the widget to a different location to change the behavior.

Consider the following widget which calls a callback on hot-reload and does nothing else:

class ReassembleListener extends StatefulWidget {
  const ReassembleListener({Key key, this.onReassemble, this.child})
      : super(key: key);

  final VoidCallback onReassemble;
  final Widget child;

  @override
  _ReassembleListenerState createState() => _ReassembleListenerState();
}

class _ReassembleListenerState extends State<ReassembleListener> {
  @override
  void reassemble() {
    super.reassemble();
    if (widget.onReassemble != null) {
      widget.onReassemble();
    }
  }

  @override
  Widget build(BuildContext context) {
    return widget.child;
  }
}

You're free to insert that widget wherever you like.

Be it on a single page:

MaterialApp(
  home: ReassembleListener(onReassemble: () => print("Foo"), child: Home()),
)

Or globally by wrapping the whole application:

ReassembleListener(
  onReassemble: () => print('foo'),
  child: MaterialApp(
    home: Home(),
  ),
)