FlexColorScheme V4 for #FlutterDev has a daunting amount of cool new features, including Material3 like looks ππ #Flutter package here: pub.dev/packages/flex_β¦
Try it with the Themes Playground here: rydmike.com/flexcolorschemβ¦
My quick takes feature highlight tweets in a thread
π
FlexColorScheme V4 #FlutterDev 1/10
When opting in on new sub themes, border radius defaults to new Material 3/You guide values and varies by Widget type. Change it to whatever you want for all #Flutter Widgets, 4 dp as before, square or super round, via a single radius valueππ
FlexColorScheme V4 #FlutterDev 2/10
When opting in on new sub themes, the Material 3 FAB border radius can feel a bit "too new" in #Flutter. Keep it circular even with M3 defaults, and other border radius settings too, if you so prefer πππ
FlexColorScheme V4 #FlutterDev 3/10
With the new sub themes, you can vary your TextField style easily. #Flutter InputDecorator theme with all its states is tricky. Now go outlined, underlined, filled, border when not focused - easily! Border radius? You know what to do... ππ
FlexColorScheme V4 #FlutterDev 4/10
With the new sub themes, you get Material 3 like #Flutter TextTheme styles, if you like. Its headline sizes are more sensible. The M3 like text coloring can be turned off. Roboto is default, I used NotoSans in this demo, because is nice! πππ
FlexColorScheme V4 #FlutterDev 5/10
Theming #Flutter Chips properly is tricky and a bit limited with current ChipTheme, but we can still be M3 inspired! π
What are themed state effects? Well everything needs to follow the theme, also small details! ππ
FlexColorScheme V4 #FlutterDev 6/10
Not enough #Flutter themes? Swap primary and secondary colors to double the combinations! Wait since you can do it separately for light and dark mode, that quadruples the combos! π€―ππ
All do not work so well, but some were designed for it
FlexColorScheme V4 #FlutterDev 7/10
Dark mode huh? Too bright for you? Try #Flutter stealthy true black! ππ
FlexColorScheme V4 #FlutterDev 8/10
Dark mode huh? Making your own color scheme and #Futter dark mode colors have you buggered down? Compute them from your light mode color definitions and adjust saturation as needed, 0% is light mode colors, 100% is... well you'll see it! ππ
FlexColorScheme V4 #FlutterDev 9/10
So blend mode is what?
"It mixes primary color into #Flutter surface colors using a defined alpha blend value and also varies its strength by surface type"
Say whaaat? Yeah, just play with it... π ππ
FlexColorScheme V4 #FlutterDev 10/10
How many themes are there anyway?
Too many! Naah there ain't no such thing, so yeah there are 36 matching light and dark themes, but who's counting... πππ
BTW, the #Flutter Themes Playground used in this thread is open source tooππ
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
In a tweet @KhalidWarsa asked how to use the Material ThemeBuilder to get these colors into a Material 3 ColorScheme. While you can, it will not give you code where it is easy make a new scheme via code in #FlutterDev. I suggested using FlexSeedScheme to make the ColorScheme. 1/n
Here an example resulting light and dark #Flutter ColorScheme. Below we will look at how to get there and possible more tweaks to it. This scheme was made with package FlexSeedScheme where you can control the result using SeedColorScheme.fromSeeds 2/n pub.dev/packages/flex_β¦
For the sample I used the Adaptive Theme Demo sample, made for the Fluttercon 24 talk "Everything Material All At Once"
Wait, what, it is doing this crazy thing, it's like #Flutter flexy color blends, with lots of modes and styles. Flex it here, flex it there, what are all these blendy things?
To try it, is to love it, play with it for fun 'till you grok all #Flutter flexy colors in a their schemy M3 like material bonanza for You, try it here if you will rydmike.com/flexcolorschemβ¦
#FlutterDev connoisseur @biz84 showed us how to make a #Flutter web body like layout, that is centered and width constrained.
What happens if we use this with scrolling content?
What is your solution for it?
Do you have the perfect one? Let us know!
Meanwhile let us check out how this works with scrolling content. We keep Andrea's nice login card and add a bunch of other things to it and put it all in a scrolling view. Hmm scrollbars next to the body content, not so nice...
Can we fix this easily? Sure, let's disable the scrollbars for the child and put our own scrollbars outside of it all...
Ever noticed how messy and different the behavior of the #Android system back button or back navigation swipe gesture is on different applications that have a bottom navigation bar or a top tab view? You can do what you like in #Flutter and otherwise too. I found 5 patterns: π§΅π
1. BACK always pops entire app, regardless of where you are on bottom destination, examples:
- Philips Hue app @philipshuedev
- Dropbox (persists last used)
- MS apps, like Word, Excel, PPT
For me this is the worst pattern, more on why later.
2. BACK if not on 1st destination, go to 1st, then next back pops app:
- Twitter
- WhatsApp, uses a top tab view, you can swipe between them, a back swipe is different and that takes you to main chats tab if you are not on it, and next after that pops the app.