FlexColorScheme comes bundled with seven different examples. A default example that is built if you build
main.dart in the example lib folder.
The default example, also called "Hot Reload Playground", is a template that is heavily commented to guide you and encourage you to play around with different options using the FlexColorScheme API, then use Flutter's hot reload feature and see the results at once.
The other five examples are a part of a tutorial path, with increasing complexity, we walk through them all in the tutorial. It ends with the complete Themes Playground app included as example and tutorial step 5.
A quick and simple way to try FlexColorScheme is to build the default example application. You can then use it as a hot reload playground to experiment with and test different theming and configuration options.
To try the default example on a device or simulator, clone the repository and run the example:
cd example/ flutter run
The result is a demo app that uses the Flutter Dash color scheme, has a theme mode switch, includes theme colors presentation and Material widget samples. With these you can see the active color scheme's colors and the created theme's impact on common Material UI widgets.
|Hot Reload Playground, the Default Example App|
It is a fully loaded template, that uses a large number of available API options and thorough comments that explain what to change to produce different results. You could for example change the
FlexScheme.blueWhale, as shown below and hot reload it, to use it as its theme instead.
// To use a pre-defined color scheme, don't assign any FlexSchemeColor to // `colors`, instead pick a FlexScheme and assign it to the `scheme` property. // Try eg the new "Blue Whale" color scheme. const FlexScheme _scheme = FlexScheme.blueWhale;
There are many properties you can easily modify in the default example application. They are excessively commented in order to provide guidance for those that want to jump right in and start trying it out.
|More examples of the Hot Reload Playground|
The results shown above were all produced by editing a few simple properties in the Hot Reload Playground.
You can build the examples by using pre-configured launch and run config files for VS-Code (.vscode -> launch.json) and Android Studio/IntelliJ (.run -> *.xml files).
When you have cloned the package repo and opened the project in VS-Code or Android Studio/IntelliJ, the configurations below should be available. With them, you can easily build all the examples.
If you want to take a quick look at all these tutorial example applications, you can see screenshots of them as phone builds below. Even better, try their live web versions by clicking on their respective example link below.
Example 1 represents the simplest use case. To use one of the built-in color schemes as your application theme. You can toggle between its light and dark variant, or allow device system theme mode setting to control if the dark or light theme is used.
|Example 1) Using a built-in FlexColorScheme color scheme as application theme|
Example 2 is like example 1, but we use custom colors to make a custom color scheme and turn it into a theme. The architecture is also more advanced, it uses the approach introduced with Flutter skeleton template, using a theme service and theme controller. Here we keep settings only in memory using the in memory
ThemeServiceMem theme service.
|Example 2) Using custom colors with FlexColorScheme as application theme|
In example 3 we can toggle the active theme between 3 different predefined color schemes, plus the custom one we defined in example 2. We can also opt in and out of using FlexColorScheme's opinionated component sub-theming.
All the settings are persisted locally, using a theme service called
ThemeServicePrefs. This service uses the package SharedPreferences to persist the theme settings locally as they are modified.
|Example 3) Using three built-in schemes, plus a custom color scheme as application theme options|
In example 4 we can select any of the different built-in color schemes plus three custom ones, and use them as the application theme. In this example we persist the theme settings using a theme service called
ThemeServiceHive. It persists the settings locally using a package called Hive.
|Example 4) Using custom schemes, plus all the built-in ones as application theme options|
Example 5 is the last, and most complex of the examples. It contains almost all configuration and settings available in FlexColorScheme. You can modify them interactively and the application changes theme as you modify any setting.
In this example we also persist the theme settings as you change any value and parameter in the app. This is done using the same theme service
ThemeServiceHive that was used in example 4. The settings can also be reset back to their default values.
This example is best seen and tested on a tablet, desktop native or desktop web browser, rather than on a phone. The app certainly works well on a phone sized canvas too, it is using two different very responsive designs. It is however a bit challenging to get a good overview of all the theming possibilities and their impact on different widgets on a phone, since you see only a few widgets at the same time when you change the theme.
Starting from version 5, the topic based swipe enabled page view is very nice on phones too, and mostly gets around this issue. When used on a canvas about the size of a tablet in landscape it can even show you the code configuration in a side-by-side view on each topic page. You can then see how the setup and config code changes and updates, as you modify settings. This is quite fascinating and a very convenient way to study the API.
Originally this application was supposed to be only a slightly more complex example than example 4. However, it has since then grown into a complete companion application for FlexColorScheme.
You can use the live web version to play with theme configurations as much as you like, with complete customization possibilities of almost every API FlexColorScheme offers. When you are done, you can copy the configuration setup code for it, and paste it into your application and start using the exact same theme that you configured in the Themes Playground.
There is a separate chapter with more info and a guide on how to use the Themes Playground.
|Example 5) The Themes Playground|
An already classic example of FlexColorScheme usage can be seen in the Flutter web Flexfold demo app.
The live version of the Flexfold demo is still using FlexColorScheme version 3. As can be seen it was very capable already back then. Example 5, the Themes Playground app now has many more options and offers considerably more advanced theming features than the Flexfold demo ever did.
I would love to feature a few select apps using FlexColorScheme here. If you have one and would allow and like me to include a mention and screenshot of it here. Then please drop me some screenshots first in the FlexColorScheme GitHub discussions show and tell section, and we can take it from there.