Tame those TextStyles! — gskinner blog

gskinner team
Mar 31, 2020 · 2 min read

One of the most verbose parts of Flutter is handling of various font styles, sizes, and families. In this post, we’ll show a couple of the tricks we’re using in production to ease this pain point.

Styles.dart

The first step we do in nearly every project, is to define a base Styles file, that will hold a variety of small classes, defining our core Fonts and TextStyles:

  • Why the get functions instead of variables? By using static functions, we can change these values at run-time for extremely fast iteration and tweaking.
  • We can change the font style, or font sizes globally, extremely easily and quickly. All styling code is consolidated in one tight package.
  • FontSizes.scale — A bit outside the scope of this article, but we like to expose a global scale modifier to our fonts. Normally this is 1, but we can tweak it for different form factors.

With the above class, we can now define a Text widget like so:

That’s not only a lot more readable, it’s also is significantly easier to maintain as your project scales.

Ok, so that’s pretty good… but it can be better!

While the above approach is an excellent foundation, it could still spiral out of control if you tried to define every single combination of bold/italic/character spacing. There can be a lot of ‘one off’ styles in an app, and it would be nice to be able to easily tweak these styles on the fly…

Dart Extensions to the rescue!

Modifying a text style is actually pretty easy, using the copyWith API, it’s just kinda verbose:

Oof. That’s a lot of code to just add bold, italic and tweak the letter spacing. It’s not super readable either, the important stuff ( body, bold, italic, 1.6) represent only 15% of the characters, the rest is boilerplate.

We define a super simple TextStyle Extension to ease this pain:

Now, we can re-write it like this:

Much better! Boilerplate is only about 50% of the character count, and the intent is much more clear.

We thought of creating a package for this, but decided that it should probably live in the excellent styled_widget package, so we’ll try and make that happen soon.

Thanks for checking out the post!

Flutter Community

Articles and Stories from the Flutter Community

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store