Tale Of Two Flutter Text Themes

It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it … starts the Charles Dickens novel about the French Revolution.

It could be said the same of the mobile device revolution, as at times we had more than two platforms. To deliver custom fonts in Flutter, you have to create two text themes, one for Cupertino Widgets and one for Material Widgets. Let me show you the easy way to do this.

Background

Both the Android And Apple platforms compute color differently which is the basis why we have to do two different text themes in the first place as Apple text colors on text labels are dynamically changed per the Cupertino Widget context to integrate with Apple’s four theme modes.

Because the typography class is older and predates the split of widgets into material and cupertino it is the one to define custom fonts on non-Apple platforms, whereas on Apple devices we use the Text Styles that integrate with the Cupertino Text Themes.

Let’s get to some code.

The Code

I use the Google Fonts package to help define the custom fonts I will use: