Variable Fonts are part of the Material Design 3 Specification. However, the Roboto variable fonts and the material symbols variable font are still not part of the flutter SDK.
In this article I am showing you how to get the Roboto variable fonts into the flutter SDK along with the Material Symbols icon variable font. And, along the way some dart tricks that make customizing component themes easier.
So why do it this way in coming to a full example of flutter theme configuration?What we want as designers is a good base that generally adheres to the material design 3 specification. Then use that to and modify according to the specific design vision we have for our flutter app.
And there is enough things not fully completed in the Theme implementations that we have to figure out we will handle it as far as coming up with our custom implementation to address it. ### For example, the theme platform adaptations in the Theme.raw constructor is not complete and thus we need an alternative way to address that with iOS and MacOS component themes specifically.
Right now only Switch.adaptive has a an adaptiveMap theme implementation and so that means well the other 3 to 4 adaptive component for iOS and MacOS do not have the right adaptive theme applied. So its about setting up this base of component themes in such a way that we have used dart techniques to provide design solutions for such issues.
I am putting up theme code in steps and then the full working solution in the same GitHub repository:
Master Flutter Themes
Keep reading with a 7-day free trial
Subscribe to Fred’s Flutter Newsletter to keep reading this post and get 7 days of free access to the full post archives.