How to use flutter_mobx with templates?

[gabrielguedest]

There are moments that i need to create two screens that follow the same layout but receive data from different stores. Im trying to implement something like dumb templates that just receive data (observables) and rebuild when necessery using Observer. But when i pass the data coming from store the data turns into a simple String (or what was defined as @observable).

The only way that i was able to work with dumb templates is passing the data through a function final String Function() title and calling it inside an Observer Text(title()).

Is there a possibility to use mobx with templates like the code below? (example code that doesnt rebuild when any props change on store):

Is there any better approach that i should be using? Any ideas?

Code example to demonstrate what i'm trying to do:

class WidgetTemplate extends StatelessWidget {
  final String title;
  final String subtitle;
  
  const WidgetTemplate({ required this.title, required this.subtitle });
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Observer(
          builder: (_) => Text(title),
        ),
        Observer(
          builder: (_) => Text(subtitle),
        ),
      ]
    );
  }
}


class ScreenOne extends StatelessWidget {
  final StoreOne storeOne;
  
  const ScreenOne({ required this.storeOne });
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WidgetTemplate(
        title: storeOne.title,
        subtitle: storeOne.subtitle,
      ),
    );
  }
}

class ScreenTwo extends StatelessWidget {
  final StoreTwo storeTwo;
  
  const ScreenTwo({ required this.storeTwo });
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WidgetTemplate(
        title: storeTwo.title,
        subtitle: storeTwo.subtitle,
      ),
    );
  }
}

[amondnet]

https://mobx.netlify.app/guides/when-does-mobx-react#3-beware-of-reading-values-instead-of-observables

This is just an extension of Rule 1. For MobX to do its job, you have to ensure only Observables are being read inside the reaction. If you happen to read the value instead of the observable, no tracking will take place. A simple example is shown below:

final count = Observable(10);
var value = count.value;

reaction((_) => value, (v) => print('New value: $v'));

Notice that we are reading the value inside the reaction's tracker-function. This is not an observable, but just a plain number. MobX will not do any tracking and effectively this reaction will never re-execute again!.

Observer(
          builder: (_) => Text(title),
        ),

Notice that we are reading the value inside the observer. This is not an observable, but just a plain text. MobX will not do any tracking and effectively this reaction will never re-execute again!.

class WidgetTemplate extends StatelessWidget {
  final String title;
  final String subtitle;
  
  const WidgetTemplate({ required this.title, required this.subtitle });
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
         Text(title), 
         Text(subtitle),
      ]
    );
  }
}


class ScreenOne extends StatelessWidget {
  final StoreOne storeOne;
  
  const ScreenOne({ required this.storeOne });
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Observer(
          builder: (_) => WidgetTemplate(
        title: storeOne.title,
        subtitle: storeOne.subtitle,
      ),),
    );
  }
}

class ScreenTwo extends StatelessWidget {
  final StoreTwo storeTwo;
  
  const ScreenTwo({ required this.storeTwo });
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Observer(
          builder: (_) => WidgetTemplate(
        title: storeTwo.title,
        subtitle: storeTwo.subtitle,
      ),),
    );
  }
}