Don’t just offer light and dark settings as options, also offer the mode system as a user choice.
If you specify ThemeMode.system as themeMode, the application will follow the theme mode used by the host operating system. We use and watch a third provider for this, so the theme mode can also easily be toggled via UI. Which of the currently supplied light and dark ThemeData objects gets used as active application theme, is controlled by the ThemeMode enum given to the themeMode property. Here they are given by providers that we watch for changes. We give the light and dark ThemeData objects to their respective theme properties in the MaterialApp. The MaterialApp setup is simple and compact. The MaterialApp widget watches these providers for changes, and the application is rebuilt using new ThemeData whenever a single theming UI widget is changed anywhere in the application. The UI view widgets modify Riverpod NotifierProviders, that act as theme property controllers in ThemeData providers. It also shows how simple it is to make small UI theme control widgets that can be dropped in anywhere, were needed in an app, and then used to manipulate and modify the ThemeData of the application. The providers are used to provide the current ThemeData for light and dark theme constructed by FlexColorScheme, as well as the theme mode state. The app demonstrates how the ThemeData, and ThemeMode states of the application can be easily managed using Riverpod, together with Providers and NotifierProviders. The demo UI uses several ToggleButtons based widgets as well as SwitchListTile, Slider.adaptive and PopupMenuButton, to compose UI widgets used to change several input values for the used and demonstrated FlexColorScheme theming features. It is also mentioned in the FlexColorScheme docs. This demo is provided as an additional example to the six examples already included with the FlexColorScheme package.
RIVERPOD V2 CODE
It has a feature-first folder structure, making it easy to find related code by feature. It does, however, use more advanced state management techniques than the Themes Playground app. It uses many advanced FlexColorScheme theming features, but not as many as the Themes Playground application. This example is designed to work with and use the stable releases of FlexColorScheme 7 and Riverpod 2. Contentsģ.4 Listener KeyValueDbListener Callback When DB is Changedģ.5 State Controller usedKeyValueDbProvider Used by UI to Change DBĥ.3 SharedPreferences and Hive Key-Value DB Implementations The app and this article like readme, may be tuned a bit after reviews and feedback, before releasing version 1.0. You can try a live WEB version of the ThemeDemo application here This is a 0.9.x version release, but principles will remain the same in version 1.0. The source code for the ThemeDemo application can be found in the GitHub repo /rydmike/theme_demo. Screen recording of the ThemeDemo app with Riverpod and persisted theme changes. It is not intended to look extremely beautiful or be very useful as an app.
The app is used primary to demonstrate FlexColorScheme and Riverpod concepts, and to provide usage suggestions. It would be straight forward to also add persistence implementations that use cloud-based services. The used local settings persistence implementation can be changed via the application’s user interface. The theme settings are persisted locally as they are modified. It uses Riverpod providers to watch FlexColorScheme based light theme and darkTheme changes in a MaterialApp, and to change the used themeMode as well.
RIVERPOD V2 HOW TO
This article presents a Flutter application example that shows how to use FlexColorScheme together with Riverpod to dynamically change your application theme. Theming using FlexColorScheme and Riverpod Theming using FlexColorScheme and Riverpod Example setup of Flutter persisted theming with FlexColorScheme V7 and Riverpod V2. Theming using FlexColorScheme and Riverpod | RydMike Fluttering Skip to the content.
0 kommentar(er)
