I’d like to share with you a little problem I encountered when passing a map with various components as parameters to an other Component, some of which containing the RiverpodComponentMixin mixin.

With the following code, if you add a component containing the RiverpodComponentMixin mixin, then remove it and add it again, you’ll run into a problem.

class MyRiverpodComponent extends Component with RiverpodComponentMixin {
  late TextComponent textComponent;
  String title = "Example";

  @override
  FutureOr<void> onLoad() {
    add(
      textComponent = TextComponent(
        text: title,
        textRenderer: TextPaint(style: const TextStyle(fontSize: 48)),
      ),
    );
    return super.onLoad();
  }

  @override
  void onMount() {
    addToGameWidgetBuild(() => ref.listen(titleProvider, (previous, String newTitle) {
          title = newTitle;
        }));
    super.onMount();
  }
}

 

class MyComplexComponent extends Component {
  final Map<String, Component> mapComponent = {
    "title": MyRiverpodComponent(),
    "text": SimpleTextComponent(),
  };

  @override
  void onLoad() {
.
.
.

Instead, you will need to pass the Builder of those Components.

class MyComplexComponent extends Component {
  final Map<String, Component Function()> mapComponent = {
    "title": () => MyRiverpodComponent(),
    "text": () => SimpleTextComponent(),
  };

  @override
  void onLoad() {
.
.
.