Change Flutter app theme according to the system theme mode
Hello dev, now a days I guess every OS has the option to change the theme between light or dark but not every app follow this and some users complain about it. What do you think about implement such thing with out an extreme effort on you app? Let’s see how it works in Flutter.
As usual I won’t make a fancy app, and will only focus on the implementation of the feature. What we want to archive in this article is, when the user changes the OS theme the app will listen and then change the theme according it, and the result will be like the image bellow.
The first thing you need to do is change the first widget in the tree to StatefulWidget because some part of the code will be in the init function. And after that you need to observe the event when the user changes the OS theme, and for that you will extend the WidgetsBidingObserver on you widget.
Now let’s use the ValueNotifier as the tool to control the state management and trigger the event to the widget tree and change the brightness.
Next step is register the widget in the WidgetsBinding observer to listen to the change theme event and initialise the app brightness according the OS brightness on the initState function. Then you need to implement the didChangePlatformBrightness function because every time this change theme event happen this function will be trigged and you need to update the value according the OS.
Last but not least, you need to put your MaterialApp widget inside a ValueListenableBuilder in order to listen the change on the state management and reflect the update on the widget tree.
Pretty easy right? But there are a lot of ways to do that and you can explore it on the Flutter community and if you are interested in read more about read the Flutter Theme documentation to customise even more your app.
