Exmaple 1 from the docs Does not appear as Expected #183
-
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) |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 6 replies
-
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 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.
On the other hand, the counter app above in your example, is set to Of course, the counter app, in your example, shows so few widgets so the only diff you can see easily is the Nowadays when you create a new default Flutter counter app, it has
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. |
Beta Was this translation helpful? Give feedback.
-
Thank you so much for your response @rydmike . this explains alot. i think i must have been learning this whole time the wrong way. today is the 5th day i woke up trying to understand how I can use Custom FlexColorScheme for my Brand App design. I have literally read and watched almost all the videos you have made about it. starting from the pair programming with Majid to the flutter Vikings, reading your PowerPoint slide and following through the docs. i have never really invested my time into learning proper theming. but i have generally learned alot. Understood the whole components that make up the material 3 design. WHAT I WANT TO REPLICATE WITH THE FCS USING M3I hope this is possible? I may be a slow learner. but I have a lot of dedication and that seems to help me most of the time. once again. thanks for your response, I truly Appreciate |
Beta Was this translation helpful? Give feedback.
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 htt…