Flutter Tips #2

Ever start a new project but don’t know what styles to use for your text themes throughout your application?
Have no fear and head on over to the material type system.

This awesome little page is well worth a bookmark. In short, it will get you to pick two Google Fonts, one for your headlines and one for everything else. It will then use some cleverness behind the scenes to generate a full typography system for you.

Quote from the Material Team:

Any font you choose is automatically resized and optimized based on Material typography guidance for readability

image_2021-10-03_130502.png

If you then jump on over to the code tab and select Flutter, you will be given the full code to add to your application. It is worth noting you will need to import the Google Fonts package for this to work.

flutter pub add google_fonts

And that’s it! You may of course want to tweak the system ever so slightly based on your UI/UX designs; however this will give you a great foundation to use in your design software of choice (I use Figma)

Until next time!
Ryan



Previous
Previous

Flutter Tips #3

Next
Next

Flutter Tips #1