rydmike
commented
1 year ago Hi @Raider-hub,
Glad to hear you are trying out FlexColorScheme.
For example 1, the docs shows what the app looks like in Material-2 mode when useMaterial3: false.
There is a toggle in the newer example app where you can set it to M2 or M3. The current version defaults to starting in M3 mode.
I should perhaps update the screen shots for it in the docs, or maybe just add the screen shots for what it looks like in Material-3 mode as well. For now I just added an explanation that it starts in M3 mode and can be toggled to the shown M2 mode and challenge the reader to do so 😄
If you toggle the example 1 to Material-2 mode, it will be using the same theme as the one you see in the doc here https://docs.flexcolorscheme.com/tutorial1#result and look the same.
| Example 1) Material-3 mode. | Example 1) in Material-2 mode. |
|---|---|
On the other hand, the counter app above in your example, is set to useMaterial3: true, so it does match the defaults of example-1 app, if you build it or run the web demo for the first time. However, like you correctly said, it does not match the theme image shown in the docs, here https://docs.flexcolorscheme.com/tutorial1#result, but the updated doc now explains that as well. Thanks for pointing out this doc update need! 👍🏻
Of course, the counter app, in your example, shows so few widgets so the only diff you can see easily is the FAB and AppBar in the counter app, still that is quite a lot since they are radically different between M2 and M3 design.
Nowadays when you create a new default Flutter counter app, it has useMaterial3: true defined, like your example code does.
NOTE: Eventually M2 mode is going away completely in Flutter. Next Flutter release will have
useMaterial3: trueas default without setting it explicitly, it still defaults to false unless you define it to true. Next release might even deprecate theuseMaterial3flag, but not yet the impact of it, but after a year after it may even be removed from the framework. That has at least been mentioned by the Flutter team.
As for learning more about FlexColorScheme. Most devs I talk with tend to use the ThemesPlayground app to configure the theme visuals and components the way they want them to look and just copy-paste the FlexColorScheme API config code to their app.
If you look at the FlexColorScheme API code view in the Themes Playground, as you visually configure theme settings in the Themes Playground, you can see and learn what changes what in the API code, as you change settings.
When you are done, you can just copy paste the config setup to Flutter, it is not necessary to learn the API, but of course a good idea to do so.
More about the Playground in the docs here https://docs.flexcolorscheme.com/playground.
Going through all the tutorials, from example-1 that you started with is certainly very useful. Playing with the hot-reload example, the repo default example, can also be useful.
The API guide covers basics to advanced features: https://docs.flexcolorscheme.com/api_guide
There are also full pub generated API docs, but at the moment https://pub.dev/ is still NOT updated to use Flutter 3.13.0 and Dart 3.1.0, so the API doc generation is till broken. It has been so for 3 days now. Hoping it will be fixed soon.
(Pub still running on Pana 0.21.35, Flutter 3.10.6, Dart 3.0.6., so it cannot generate doc API for latest FlexColorScheme that requires Flutter 3.13.0, it should be fixed by the Flutter team soon and back automatically when it is.)
If you want to learn more about Flutter theming in general, that applies without using FlexColorScheme, there is guide section for that too: https://docs.flexcolorscheme.com/theming_guide
This is a good question, but not really a package issue. I like to move good questions and discussions like this to the repo Discussions section so it becomes a part of the Q&A there and more free form Q&A's and we can can continue the discussion and Q&A there.
Following the examples in Docs. I applied example 1 to the counter App and it appeared differently on light mode.
Code:
results :
how can i also customize the widget to my app Bran look(e.g customizing the elevated button color, and shape,radius, overiding the default background color.
Sorry i'm still trying to understand how the package works.
My major concern is using this package to replicate the same brand App theming/design with M3 enabled.
[√] Flutter (Channel stable, 3.13.0, on Microsoft Windows [Version 10.0.22621.1992], locale en-NG) [√] Windows Version (Installed version of Windows is version 10 or higher) [√] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [√] Chrome - develop for the web [X] Visual Studio - develop Windows apps X Visual Studio not installed; this is necessary to develop Windows apps. Download at https://visualstudio.microsoft.com/downloads/. Please install the "Desktop development with C++" workload, including all of its default components [√] Android Studio (version 2021.1) [√] VS Code (version 1.81.1) [√] Connected device (2 available) [√] Network resources