It should look something like this,Īnd then wrap our MaterialApp() in a ViewModelBuilder.reactive() named constructor, create a MainViewModel class under and give the ViewModelBuilder a type of MainViewModel. Now back into our main.dart, put setupLocator() before runApp() since we want to instantiate those services before the app starts. Then we also instantiate reactive values from observable_ish and give it a type of ThemeMode since we will be toggling over dark and light mode.Īfter defining our properties for light theme and dark theme, we can then make our application toggle between themes. Then we also import material package since we will be using classes like ThemeData, ThemeMode and other widgets related to create our theme. We then import observable_ish inside this ThemeService class since we will be using it inside the class as we would be toggling over dark theme and light theme during run time.
Right after we have set up our ThemeService class and registered it as a singleton, we then define our theme data inside the ThemeService class, our ThemeService class is using a mixin ReactiveServiceMixin since this will be handling the reactive values in the service.
#FLUTTER DARK MODE SWITCH CODE#
This is what the auto-generated code looks like… :) It should look something like this if you have done things correctly.īasically it created a file and it registered the ThemeService class as a singleton, this we can now access our ThemeService globally in our application if you might need theming in other parts of the code. It would take a moment to auto generate the code for us.
When you have created it already then it’s about time we run the builder and let it generate boilerplate code for us! Open up a terminal or use your existing terminal, then execute the command below Then create a file called as theme_service.dart and inside the file, write the code and put a lazySingleton annotation from the injectable package, so it will auto register this service and make it accessible globally in our Flutter app. In the /lib directory, create a new directory and name it as “services” since inside here we put all of our services that will be responsible of serving some sort of data into our viewmodels. Hang on for a little bit as we need to create our theme switcher class or theme service. You may see that VSCode have been indicating errors in the code and that’s fine because the auto-generated boilerplate code are not there yet. If you have followed then your project directory would look something like this. And then create a file locator.dart in it. We create a folder inside /lib directory and name it as “app”, in this directory is where we put our locator, this handles the dependency injection of our Flutter application. For the main.dart file, clean it up and leave what we only need.
#FLUTTER DARK MODE SWITCH INSTALL#
Okay so make sure you run pub get to install the dependencies.Īfter setting up for the project, we can then start writing code for our theme switcher. But I am now going to talk about that in here.Īnd lastly, under the dev_dependencies, these are what we need so we can avoid boilerplate code in our Flutter app since we would be using injectable annotations as how they are recognized for the builders. You might say it is an old package but there is a reason why Dane from FilledStacks have chosen this package.
For observable_ish package handles the reactive values inside services of the stacked architecture. The other 3 below are the ones that handles dependency injection in our Flutter app. Under dependencies, we need the stacked since it is what we are using for our state management solution. Enter fullscreen mode Exit fullscreen mode
0 kommentar(er)
