Summary

The article discusses how to create a single text theme that works for both Material-based and Cupertino-based platforms in Flutter, using custom fonts.

Abstract

The article begins by explaining the background of Flutter's platform-aware widgets and the Flutter Platform Widgets plugin. The author then demonstrates how to use the Google-specified MaterialBasedCupertinoThemeData function to create a single text theme that works for both Material-based and Cupertino-based platforms. The author also explains how to use custom fonts and the raw TextStyle calls to specify which text styles should be serif and which should be sans fonts. The article concludes with some additional resources and information about the author.

Opinions

The author believes that using the Flutter Platform Widgets plugin is the easiest way to have widgets auto-adjust to the platform the app is executing on.
The author prefers to use the raw TextStyle calls instead of the Google Fonts plugin theme helper to specify which text styles should be serif and which should be sans fonts.
The author believes that the core text theme is not the only text style that needs to be specified, and that the selectedlabel and unselectedlabel text styles also need to be specified.
The author provides some additional resources and information about themselves, including some useful guides and their contributions to Flutter plugins.

One Text Theme To Rule Them All

In Flutter, we have two types of platforms; Material-based and Cupertino-based. Let me show you the trick to write one text Theme that works for both platforms and how to use custom fonts.

Background

Google does cover this in the Flutter training docs. First, the Flutter team had just material widgets for both material-based and cupertino-based platforms. Then Google started implementing cupertino-based widgets.

Then some independent groups of Flutter developers came up with the concept of Platform Aware widgets.

Swav Kulinski, Do Flutter apps dream of platform aware apps?

A brief example of that approach is at:

Platform Aware Widgets flutter

This is why I contribute to the Flutter Platform Widgets plugin and why I use that plugin. It’s the easiest way to have the widgets auto-adjust to which platform the app is executing on, without a bunch of manually recreating the solution each time per app.

I flow my theme through that plugin in a very specific way:

Part of my one color theme trick is that I use a Google specified MaterialBasedCupertinoThemeData function to specify the Material theme I am using for the app and that construct re-populates the Cupertino widgets with the material based color properties of primary, primary variant, secondary, and secondary variant.

I can get one text theme for my custom fonts for both material and cupertino widget using the same trick as the text theme comes in at the base light and dark material themes, which the light theme is the one used in the MaterialBasedCupertinoThemeData:

Now onto the core text Theme.

The Core Text Theme

Here is my base text theme and their text styles:

Notice that I do not use the Google Fonts plugin theme helper, but just do the raw TextStyle calls instead. This way, I can specify which text styles I want as serif and which ones I want as sans fonts.

Conclusion

These are not the only text styles that have to be specified, as we still have the selectedlabel and unselectedlabel to specify as text styles. But, you get the general gist, how to set it up so that both Material and Cupertino widgets can use such text styles. The only difference is that you will have to apply those text styles at the component theme level.

About Me, Fred Grott

I am a reformed Android, Java, Kotlin, and Front-End developer. I am a reformed ADHD’er and Code and Design Cowboy.

The Flutter Plugins I contribute to are:

Flutter Platform Widgets

https://pub.dev/packages/flutter_platform_widgets

Catcher

https://pub.dev/packages/catcher

Some useful guides are:

Choosing A Flutter State Management Solution https://readmedium.com/choosing-a-flutter-state-management-solution-cccf1b2acf10

How I Learned To Trust My ADHD

https://readmedium.com/how-i-learned-to-trust-my-adhd-dbf4f80518cc

Flutter Perfect SetUp

https://readmedium.com/flutter-perfect-setup-c5462b412f78

Flutter Expert IDE SetUp

https://readmedium.com/flutter-expert-ide-set-up-25791ce690c

Globals Dart File IS An Anti Pattern

https://readmedium.com/globals-dart-file-is-an-antipattern-92975320e30c

Functional Programming in Flutter, Sandbox Your Functions

https://readmedium.com/functional-programming-in-flutter-sandbox-your-functions-ee679d3db7d5

Expert Catcher Setup For Flutter Apps

https://readmedium.com/expert-catcher-setup-for-flutter-apps-a9ee3a6a9e08

And I am the nut starting to write a Flutter Dev App series of books during COIVD. Not only that, but I am organically creating my Flutter Developer Book chapters via Medium article writing.

The more formalized almost ready for book code is at:

https://github.com/fredgrott/ddi_flutter

My writing approach is somewhat different. The only way to master Flutter And Dart together is to do uncomfortable work. That is, every week to stretch me in mastering new things daily and expanding my thinking models tool-set.

Learning about state management means that I have to build state management demos with benchmarks fully naked and then build them with all the boilerplate including Flutter Platform Widgets and full testing.

With the UI itself, it means building a full UI catalog of UI solutions for col screen layout cases seen in top apps. It then means generating graphical layered pieces of screens for mockup tools.

On the CS-wise level, it means becoming an expert at reactive, including the advanced libraries. This intersects with state management, as specific reactive approaches have a role to play in statement management.

If you join me in building the exact stuff I am talking about, you will be Flutter Expert after building all this stuff.