The Style in Flutter

Greg Perry
Jan 22 · 12 min read

An in-depth look at the TextStyle Widget

We’re going to use the good ol’ startup app (the counter app) as a means to examine and demonstrate the TextStyle widget in this article. However, I’ve removed almost everything of the original code leaving just the sentence, ‘You have pushed the button this many times:’ The idea being, we’ll then introduce options in this article modifying ‘the style’ of the text and get an appreciation of what the TextStyle widget can do for you and your own apps. A screenshot of the ‘stripped down’ counter app with now no style explicitly defined at all is presented below.

main.dart

I Like Screenshots. Click For Gists.

Let’s begin.

Other Articles by Greg Perry

Now, it turns out with no theme explicitly provided, you’ll find that sentence suddenly appearing with its text large, red, and underlined in yellow in front of a black background. See below. As it happens, I’ve removed the Scaffold widget from the example app, and, along with its more obvious contributions, it also provides a theme.

However, I still want to keep the code to a minimum and just concentrate on the ‘text style’ aspect of the app. And so, another approach is to provide the widget, Material, instead. It’s a StatefulWidget, and you can see its build() function (screenshot below) when no ‘textStyle’ is provided, a pre-defined style, bodyText2, is utilized resulting in an albeit more humble theme as seen in the screenshot below on the far right.

By the way, the first screenshot below is of that horrific red and yellow text style. It's a ‘high level’ variable defined near the beginning of the library file, app.dart. As you see in the second screenshot, it’s literally passed as the app’s text style. Your own app’s home screen will be a subtree of this app, and if you don’t define a style for your home screen and such, that’s the text style you get. As stated in the code’s documentation, it’s to encourage developers to explicitly specify a style.

The Parameters Of Style

text_style.dart

Inherit Style

text.dart
text_style.dart

Color Front and Back

1) child: const Text('You have pushed the button this many times:',
style: const TextStyle(
color: Colors.red,
)),
2) child: const Text(
'You have pushed the button this many times:',
style: TextStyle(backgroundColor: Colors.blue),
),

The Color of Text

colors.dart

In Flutter, you’ve got colors. Man, do you have colors! What’s more, each individual color can be assigned a further variance — either how pale the color is or how dark the color is. You’re offered ten different shades of each color.

How Opaque is Your Text

Far from final, they have one additional color called, transparent. One could say it’s not a color at all as it’s completely invisible. Ironically, it’s the first constant defined in the class, Colors.

colors.dart

Size It Up

The specified size is further multiplied by the current textScaleFactor (traditionally 1.0). This implies your text can be any size you imagine. Whether it’s readable to the intended user — that’s on you. For example, it’s been noted in Muhammed Salih Guler’s free article, A deep dive into Flutter’s accessibility widgets, explicitly assigning the textScaleFactor may interfere with any accessibility widgets you may have implemented as well. (Thanks to Scott Stoll for that tidbit)

Of course, with the TextStyle widget, you can do some rudimentary things like setting the text to bold or to italic:

The observant reader will note the two styles are dictated by two different named parameters, fontWeight, and fontStyle — allowing your text to be both bold and italic. You’ll find most of the TextStyle widget’s parameters take in a list of pre-defined constant values. For instance, such values for both the fontWeight and fontStyle parameters are found in the file, text.dart.

Giving Some Space

wordSpacing

textBaseline

“The alphabetic baseline is the line that the letters in alphabets like English sit on. You can see that the English letters sit nicely on the line, but it cuts through the Chinese characters. When you use the ideographic option, though, the baseline is at the bottom of the text area. Note that the Chinese characters don’t actually sit right on the line. Rather, the line is at the very bottom of the text line.” — What is the difference between alphabetic and ideographic in Flutter’s TextBaseline enum (source: stackoverflow.com )

height

What’s Your Locale?

What’s In The Foreground?

The Shadow Knows!

main.dart

There are Font Features

Font Features in Flutter

Decorative Text

Decorative With Style

The Thick Of It

Label Your Development

text_style.dart
text_style.dart
text_style.dart
text_style.dart

The Font Family

main.dart

A Family Package

text_style.dart

Google Font Family

There Is A General Theme

I’m afraid you will have to provide a ‘text theme’ whether with a Scaffold widget the implies one or by explicitly specifying the style with the TextStyle widget. Otherwise, it’s all black, red and yellow.

Cheers

*Source code as of November 02, 2020
+Source as of November 20, 2020

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