flutter MobX change theme on store prop change

Question

I'm working on a simple flutter app that uses MobX as a state manager. this app has a 2 main theme:

1. dark mode
2. light mode

I want my app to switch between these 2 themes in runtime when a MobX store state changes. here is my main.dart:

void main() => runApp(MyApp());
final appStore = new AppStore();

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'my app',
      theme: getThemeData(appStore.isDarkMode),
      home: MyHomePage(appStore: appStore),
    );
  }

  getThemeData(bool isDarkMode) {
    if (isDarkMode) {
      return ThemeData(
          brightness: Brightness.dark,
          primarySwatch: Colors.blue,
          fontFamily: 'Sumsung-sharp-sans');
    } else {
      return ThemeData(
          brightness: Brightness.light,
          primarySwatch: Colors.blue,
          fontFamily: 'Sumsung-sharp-sans');
    }
  }
}

i want when appStore.isDarkMode is changed by user the whole app theme update and react but it only change on app render first time and dnt update it self when store change.
any idea?

Solution

you should use Observer widget from mobx library onto MaterialApp widget and changeThemeModeFunction will be triggering @action function in AppStore class

More info in the documentation