feat: Adding ComponentNotifier API

[erickzanardo]

Description

This adds a proposal for a new API for flame, the ComponentNotifier.

This API offers the user change notifiers classes that are tied to FlameGame and its components so the user can be notified when a component is added, removed or updated.

This will enable users to:

• Take the benefit of reactive programming inside the game
• Have a simple way of watching certain states from the game, on Flutter Widgets

One important note here is that this proposal does not mean to replace integrations like flame_bloc, but rather provider an simple and out of the box solution, without any need of additional packages, since change notifiers are provided by flutter itself.

Opening this as draft for now to get feedback on the implementation, will write tests and docs once we have the final implementation.

Demo of the example:

Screen.Recording.2022-09-05.at.18.21.57.mov

Checklist

• The title of my PR starts with a Conventional Commit prefix (fix:, feat:, docs: etc).
• I have read the Contributor Guide and followed the process outlined for submitting PRs.
• I have updated/added tests for ALL new/updated/fixed functionality.
• I have updated/added relevant documentation in docs and added dartdoc comments with ///.
• I have updated/added relevant examples in examples.

Breaking Change

• Yes, this is a breaking change.
• No, this is not a breaking change.

Related Issues

[spydon]

Looks very useful to me!

[filiph]

I like this! Does this mean that I can do something like the following?

class Entity extends PositionComponent with Notifiable {

  Color _color = Color(0xffffffff);

  Color get color => _color;

  set color(Color value) {
    _color = value;
    notifyChanges();
  }
}

And then the UI can be like the following?

Widget build(context) {
  // I am probably butchering provider's API here, but hopefully you get the idea.
  final color = context.select<ComponentsNotifier<Entity>, Color>((e) => e.color);

  return Container(
    color: color,
    child: Text(entity.name),
  );
}

[erickzanardo]

I like this! Does this mean that I can do something like the following?

class Entity extends PositionComponent with Notifiable {

  Color _color = Color(0xffffffff);

  Color get color => _color;

  set color(Color value) {
    _color = value;
    notifyChanges();
  }
}

And then the UI can be like the following?

Widget build(context) {
  // I am probably butchering provider's API here, but hopefully you get the idea.
  final color = context.select<ComponentsNotifier<Entity>, Color>((e) => e.color);

  return Container(
    color: color,
    child: Text(entity.name),
  );
}

Yes! Exactly

[spydon]

Lgtm! It looks like a lot of comments, but most actually just regard one thing; that the name Notifiable should be changed (#1889 (comment)). :)