Hi
#Flutter
friends, just a notice to let you know that version 7.3 of
#FlexColorScheme
and
#ThemesPlayground
is out. It is a very minor release feature set wise, but important and required if you use
#FlutterDev
7.13, since 7.13 silently style broke a past theming API ๐๐
๐๐งต
In
#FlutterDev
Material3 you can make buttons and other shapes use M3 radius defaults on Android, but something else on other platforms. No adaptive widgets, no wrapped styled widgets, just ThemeData platform adaptive theme that changes look of app based on used platform ๐๐
๐
Letโs talk about responsive layout navigations on different media sizes in
#FlutterDev
. What features do you like to use? In this thread I show some common ones that I often use ๐๐
๐งตโฌ๏ธ
With this it will be even more simple and addictive to visually to create themes for
#Flutter
apps. Go from M2, to default M3, tweak and customize, copy paste setup code app
#FlutterDev
theme done. Need to make more mock UIs, then release. FCS v7 features done for this round๐๐
FlexColorScheme v5 has landed. To become a
#Flutter
#Material3
color and
#FlutterDev
theme wizard, get the package , read the docs and fiddle with the web Themes Playground to make your own themes!๐๐
Flexfold is almost ready for
@FlutterDev
, some tweaks plus docs remaining๐ฌ A thread.
#Flutter
Web Demo 1/14 Responsive & animated.
Animated responsive navigation mode changes, from bottom nav bar, to nav rail and side menu with optional sidebar. Try it
Here is another
#Material3
demo with
#FlutterDev
using Themes Playground and
#FlexColorScheme
. Here we want a platform agnostic Material 3 based design using a seeded ColorScheme with a single color as base ๐งต
1/
Happy to announce ๐ that
#Flutter
#FlexColorScheme
6.1 has been released. It is an easy upgrade with plenty of new features and Themes Playground improvements ๐
@FlutterDev
๐งต๐1/15
Time to call
#Flutter
day done and move to Friday evening chill mode with a glass of red and pick out a movie to watch instead of code. Any suggestions?
@VadimYuryev
The only country where it is that โcheapโ is in the US. I have not heard of any country where the iPhone is cheaper than in the US, but if it is somewhere, that would be interesting to know. Has anybody done a video comparing iPhone prices in all countries where it is sold?
Wow ๐
#Flutter
Windows desktop window resizes are so smooth on master now! This is a Windows release mode build. This GIF has reduced frame count to reduce its size, but even it looks smooth and fast!
@FlutterDev
๐
#Flexfold
web demo here
For prototyping apps without color influences, you can try a greyscale theme. It works well with
#Material3
in
#FlutterDev
and can look really cool. You can also make
#Flutter
M3 apps look flatter and more platform agnostic. Meanwhile you can focus on features and content.
๐งต1/4
What's up
#Flutter
devs! ๐
#FlexColorScheme
got a fresh update v4.1.1
With the
#Flutter
Themes Playground web app
you can make custom themes for it and copy/paste the code into your app to get the same theme! ๐คฏ๐
Here is how ๐๐งต
TOP30
#Flutter
State Management
#13
#FlutterDev
LIKE based order.
Test included if reported, API doc %, author info, GitHub stars & open/closed.
Package score card has many red boxes? Maybe consider alternatives? ๐ค๐๐
Additional comments ๐๐งต
What is new in
#FlutterFavorite
FlexColorScheme v4.2.0 release?
- Support for M3 NavigationBar in
#FlutterDev
2.8.0
- Quick selection of ColorScheme color to use in some sub-themes, not only
#Flutter
defaults
- Custom config from a ColorScheme
Details ๐๐งต
A Material3 theme creation story using
#FlutterDev
#FlexColorScheme
Customer wants us to use their brand colors and M3 color system, but brighter than M3 defaults. Their brand colors are used on white background, so they will work in light mode, for dark "similar" is OK.
โฌ๏ธ1/26
Playing around a bit with a new
#Flutter
flexible scaffold, with animated transitions between navigation modes. Extracted this from custom stuff in an app to a package called "Flexfold". Sorry not yet released, still just a teaser. Demo is a
#FlutterDev
Windows build. ๐๐ (1/2)
To make
#Android
sys nav bar look nice in
#FlutterDev
is a chore. I am often asked how to make it look good, like on iOS. Here is what it involves:
- AnnotatedRegion with
- SystemUiOverlayStyle transparent
- SystemChrome.setEnabledSystemUIMode with
- SystemUiMode.edgeToEdge
1/7
Guess what? FlexColorScheme V5 is coming as dev preview to pub soon. It is wicked, all kinds of cool new features, and of course full
#FlutterDev
M3 ColorScheme support with more flexible seed based schemes than
#Flutter
SDK. Plus it has a built in Dash wallpaper inspired theme๐
TOP30
#Flutter
State Management
#15
#FlutterDev
LIKEs based order.
Test Codecov number included if reported in pub readme banner. Also shows API doc %, author info, GitHub stars & open/closed.
If a package scorecard has red boxes, maybe consider alternatives๐
More ๐๐งต
What do popular
#Flutter
packages hive, isar, auto_size_text, dartx and logger have in common?
They were all written by Simon Leier, who recently decided to get active in
#FlutterDev
community on Twitter as
@simonleier
. Please follow him if you appreciate his packages ๐
Oops...
#Flutter
SearchBar made an appearance in FlexColorScheme 7.1 beta in Themes Playground 7.1. This version requires min
#FlutterDev
3.10.0 beta channel.
๐
@FlutterDev
Communities End of Year Call ๐
#Flutter
is not only a joy to develop with, it also has an awesome developer community with amazing people from all around the world!๐๐
Bug exploration and torture test of
#Flutter
M3 NavigationDrawer. Found at least 4 issues in it so far...
Will report them later. So mind blowing ๐คฏ when open Drawer in mock UI app, changes theme interactively too and its mode switch works on host app ๐
#FlutterDev
rocks๐
After 1 year hiatus it is back๐
TOP30
#Flutter
State Management
#18
Stats
#FlutterDev
nr of LIKES based order ๐
Test cov from Codecov site, API doc %, author info, GitHub stars & open/closed.
If a package scorecard has many red boxes, maybe consider alternatives? More๐๐งต
In a recent video
@FlutterDev
reminded us to use Themes ๐จ in
#Flutter
.
Want to see why
@materialdesign
is cool ๐in Flutter Here is a thread with links to some surprising things you can do with it. Also showing it does not have to look like M3 does out of the box ๐๐
๐งต1/8
It finally happened
#Flutter
FlexColorScheme v5 is out, as dev.1 pre-release for now. You can get the
#FlutterDev
pre-release package here
The new Themes Playground V5 is here
A thread ๐งต๐
(1/24)
For info and tech news more relevant to
#FlutterDev
than current OpenAI turmoil, head over to and read about
@hixie
's departure from
#Flutter
team from himself.
Thanks Hixie for all your work on
@FlutterDev
and glad to read you will continue to contribute
Yes it is out! ๐๐ Time for a brief about final beta of
#FlexColorScheme
v7 for
#FlutterDev
The feature set in this release and stable v7 will be identical. This is just a quality assurance final beta. Want to try it? Get the
#Flutter
package here
๐งต1/15
I was asked an interesting question about
@FlutterDev
#FlexColorScheme
. How can you make a simple
#Flutter
theme with FlexColorScheme from only a single color and customize the background colors? Let's look at it now ๐๐
1/27
#Flutter
TOP30ish Navigation Packages.
Issue-1
Includes GitHub stars, CodeCov test coverage of fancier packages that have it. ApiDoc completeness. Author info.
This is 1st version, so please let me know if your favorite
#FlutterDev
navigation package is missing or other errata.
In a recent tweet I said that another way to make text selectable and copy enabled in
#Flutter
, in addition to SelectableText, is a new widget called SelectionArea. Just wrap a part of tree, even "home" widget in MaterialApp with it, and everything can be selected, as shown here:
I published a
#Flutter
ThemeDemo example app using
#FlexColorScheme
and
#Riverpod
that persists theme settings. Used settings key-value DB implementation can be dynamically changed via UI while app is running. Read more here Article is still a bit raw๐๐
The
#FlutterDev
package
#Signals
by
@rodydavis
and the example "node_based_editor" is pretty dope๐
Not only for the cool computed signals and dynamic dependency graph demo, but also for some other used
#Flutter
techniques to draw the nodes๐๐
Adding premade starter designs to
#FlexColorScheme
v7 in its Themes Playground. These are all Material 3 themes, all looking very different. Can be used as starting points for your
#Flutter
themes. Notably a platform agnostic M3 setup and even M3 emulation of Material 2๐๐
I'm super happy and honored to be speaking about one of my favorite
#FlutterDev
topics at
#FlutterVikings
- Theming
#Flutter
apps ๐ Thank you! ๐See you there and looking forward to meeting you all! ๐๐
Heard in
#Flutter
GetX video, StatefulWidget is bad, we do not want it!
Guess what MaterialApp, SnackBar, AppBar, TextField, BottomSheet, CheckBox, NavigationRail, Slider, TabBar, & Radio have in common?
Yes, they are all stateful widgets and there is nothing bad about them๐๐
TOP30
#Flutter
State Management
#19
๐๐
@FlutterDev
pkg pub stats, likes based order and more, e.g. test coverage from Codecov site, API doc %, author info, GitHub stars & open/closed.
If a package scorecard has many red boxes and issues, maybe consider an alternative?
๐งต1/4
A dinosaur (me), doing some home office
#FlutterDev
coding to the tunes of what 90 years ago was a mobile high tech audio player! Just a bit of fun to say thanks to all my supportive
#Flutter
peers and followers on Twitter! ๐๐
Wow ๐ฒ
#FlutterDev
OverlayPortal finally got merged!! ๐ฅณ๐ it had 429 comments over 9 months, 3066 additions and 132 deletions in 10 files. This is a really cool new
#Flutter
feature ๐
Thanks for the outstanding work on the fixes
@yegorjbanov
and everyone else involved at
@FlutterDev
. I've had a local release build with SKIA of the Playground running since yesterday. Stable, no issues and it feels snappier than ever, almost like a desktop build, love it! ๐๐
How do I add Material 3 custom colors and harmonize them in
#Flutter
? The
#Material3
guide talks about using custom theme colors and harmonizing them towards your effective M3 ColorScheme . Letโs check out how to do this!
๐งต๐1/11
Since Google charts_flutter has been discontinued (yes yet another
@killedbygoogle
) for quite some time, has any other
#FlutterDev
charting package emerged as "the one" to use in
#Flutter
? Which one? What do you use? Why?
TOP30
#Flutter
State Management
#16
#FlutterDev
LIKES based order ๐
Test Codecov number included if reported in pub readme banner. Also shows API doc %, author info, GitHub stars & open/closed.
If a package scorecard has many red boxes, maybe consider alternatives? More๐๐งต
Whats is
#Flutter
polygon? A nice new shape package by
@letsar
on pub here and GitHub . Check it out! ๐๐ And what a perfect package name for it! ๐
Happy to announce ๐ that
#Flutter
#FlexColorScheme
v7.1 has been released. It supports new features in
#FlutterDev
3.10 released at
#GoogleIO
The
#ThemesPlayground
v7.1 web app is once again using the CanvasKit SKIA renderer for a smoother web experience ๐ฅณ๐Demo below๐๐
1/5
TOP30
#Flutter
Navigation Packages (
#6
)๐
#FlutterDev
number of likes based ranking.
CodeCov% included if reported, API doc %, author info, GitHub stars & open/closed.
NEWS in TOP10
โพ๏ธ Go_router climbs from nr 4 to nr 2
โพ๏ธ Fluro drops from nr 2 to nr 4
FlexColorPicker got a
#Flutter
2.10 refresh and learned a new trick. It can now optionally generate a Material Design 3 Tonal Palette using any color in the picker as key. Then you can also pick the desired color from the generated tonal palette ๐๐
This little
#Flutter
thing called
#FlexColorScheme
v4 is getting even wilder. Now doing reasonable color blends on text and onColors too๐ Had to look at what Material You does a bit, can't do all tricks in
#FlutterDev
yet, but I'm pretty pleased with it now.
A "short" thread๐
Some
#FlutterDev
and
#Material3
news, useMaterial3 is going default in
#Flutter
master channel on Thursday. Eventually, the useMaterial3 flag will be deprecated and removed per Flutter's deprecation policy and Material2 support will be removed. Ready?๐๐
Remember the themes demo from the
#Flutter
Flexfold web app?
The theming it uses is done with
#FlexColorScheme
, a
@FlutterDev
package that I just released
You can read a short intro about FlexColorScheme here
Released version 3.0.0 of
#Flutter
FlexColorScheme
- Prepared for
@FlutterDev
SDK removal of accentColor (breaking).
- Swap primary and secondary colors (new).
- Added 4 color schemes inspired by my image based theme experiments. (new)
๐
#Flutter
coolness, you can hot restart and hot reload multiple devices and desktop apps running the same code! ๐คฏ Here changing from dark to light mode with a code change. That old Nexus7 tablet takes it time, but it worked too ๐
Amazing
@FlutterDev
๐
Happy to see
#FlutterDev
Web SKIA builds working and up to snuff again. Issues plaguing it in
and have been fixed, but are still only available on master channel. Will come to stable in May in next version of
#Flutter
(3.10/4.0?)
Dang, where was this
#Flutter
widget when I needed it! Looks super convenient. There is a widget for thatโฆ (that you had no idea about, still holds true ๐)
๐๐
โ๏ธ Writing your own button controls from scratch can be a lot of work...
With FocusableActionDetector, you can combine the functionalities of these four widgets into one:
๐ฅ Actions
โ Shortcuts
๐ญ MouseRegion
๐ Focus
Watch
#WidgetOfTheWeek
โ
Nice to see when other
#FlutterDev
:s make cool theme selection and presentation widgets with
#Flutter
#FlexColorScheme
like these ๐
Learn more about FlexColorScheme in the quoted thread๐งตbelow ๐
What's up
#Flutter
devs! ๐
#FlexColorScheme
got a fresh update v4.1.1
With the
#Flutter
Themes Playground web app
you can make custom themes for it and copy/paste the code into your app to get the same theme! ๐คฏ๐
Here is how ๐๐งต
What is going on, did Signals just become the reactive GOAT in
#FlutterDev
? In any case
@rodydavis
port of Preact Signals is looking really slick. On Pub here and own docs site ๐
Still fresh, is it production ready? Maybe...๐คทโโ๏ธ๐๐
So
@FlutterDev
"WidgetState" property just happened๐ฒ Read more here and here
What are your thoughts about it? Have concerns? Consider adding feedback to PR.
Me: Better than just in Material? Sure, but not really good either ๐คทโโ๏ธ๐๐
TOP30
#Flutter
State Management
#17
#FlutterDev
LIKES based order ๐
Test coverage included if reported in Codecov site, also shows API doc %, author info, GitHub stars & open/closed. If a package scorecard has many red boxes, maybe consider alternatives? More๐๐งต
Interesting piece by
@timsneath
about
#Flutter
as a response to the
@GoogleStadia
fallout, and why Tim thinks
@FlutterDev
won't face a similar fate. I tend to agree. But do read all the excellent replies, voicing valid concerns and feedback ๐
For those wondering what happened to our favourite hot takes ๐ฅ and build in public
#FlutterDev
@luke_pighetti
โs X/Twitter account. He disabled his account temporarily, he is fine and will probably be back soon โค๏ธ
Feeling adventurous? Want that
#FlutterForward
#Material3
fun now? I published a dev release of
#FlexColorScheme
v7 using
#Flutter
beta with M3 goodies. Built Playground for it too. You can try it now, it holds all the cards with 52 built-in themes ๐๐๐
Ho ho ho, Merry Christmas ๐ and a Happy New Year ๐๐๐ฆโ๏ธ
#Flutter
#Santa
revealed ๐ predicts that in 2023
@materialdesign
3 will become popular in
@FlutterDev
. What is your Flutter prediction for 2023? ๐
#Flutter
Theme Extensions is great news. Hopefully it lands in release at Google IO
After this expect:
- Quality package UI widgets have theme extensions
- Bigger custom widgets in projects use it
- Emergence of real custom design systems in
#FlutterDev
Dang the theming options in
#Flutter
FlexColorScheme v4 (coming Soon) are really addictive and fun to play with, I can't stop! ๐ ๐
Yes these
#MaterialYou
like surface styles and round corners are included in the box, as is this
#FlutterDev
theme options playground demo app.
#Flutter
States
#06
TOP10 Get gaining on Provider. Riverpod climbs to 9. 11-20 Injectable up one, Riverpod shakes things up.
TAIL: MVC_pattern overtakes Momentum.
@FlutterDev
state management, reactive programming and dependency injection, ranked based on developer likes.
I gotta tell you Material 3 dynamic tonal palette algos are da shit! Suddenly I'm a color wizard! Even if I give it wild tonal palette key inputs, I get balanced
#Flutter
M3 ColorSchemes. Working on FlexColorScheme v5, cool stuff coming๐but much
#FlutterDev
on it to do still ๐
Taking a peek at what packages Google used to make the new
@FlutterDev
version of Google Earth is kind of interesting. I hope the devs at
@Google
write a tech blog about their
#Flutter
journey ๐๐
Post
#FlutterForward
, I just arrived home in Finland. Big contrast from Kenya, it just started snowing ๐จ๏ธ
Close-up of fresh snow โ๏ธ crystals on a tree, in winter state with no leaves. Redness from Kenya safari sunburn ๐ฅต or frostbites?๐ฅถ Not sure, feels and looks similar ๐๐
Since pub now supports screenshots of packages I will add some to upcoming
#FlutterDev
#FlexColorScheme
v7 package as well. Apparently they are the new fad on
#Flutter
packages in pub ๐๐
The new
#FlutterDev
3.22.0 release contains a number of new colors in the revised Material3 ColorScheme. They are marked with red-outlines in the image below. Three colors, background, onBackground and surfaceVariant have been deprecated, marked with bold outline.
๐งตโฌ๏ธ
Cool and hooray ๐ฅณ๐ M3 SearchBar and SearchView are coming to next
#Flutter
release. Available in beta channel now, see
#FlutterDev
here ๐๐๐