CODEWITHSUNDEEP
fluttermaterial-designmobxandroid-darkmode
javad bat
javad bat

Reputation: 5236

flutter MobX change theme on store prop change

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?

Upvotes: 1

Views: 950

Answers (1)

Atila Pehlivan
Atila Pehlivan

Reputation: 181

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

Upvotes: 1

Related Questions