Introducing Flutter Text Helpers

Ever since I started developing apps with Flutter, I found that using the Text() widget in combination with styles becomes quite difficult to read, when flying over the code.

The ugly problem

Imagine you want to add a headline, you’d have something like this.

Text('Body text', style: Theme.of(context).textTheme.headline1)

You’d have to look at the ending of the code-line to identify which element is actually rendered here.

Now, what if you for some reason need to change the color of that particular text, you’d end up with something like this.

Text('Body text', style: Theme.of(context).textTheme.bodyText.copyWith(color: Colors.blue))

You can’t clearly see what’s going on here, until you read the whole line of code. And this line of code can become even bigger sometimes.

How to solve that?

Well, one solution might be to create stateless Widgets for each and every piece of custom formatted text like GreenHeadline(‘some text’), GreenHeadlineBigger(‘Bigger text’), and so on.

The problem with this would be, that you’d have to create these Widgets for every new project.

Meet flutter_text_helpers!

The plugin offers shortcuts for rendering different styles of text-widgets while still allowing to add “ad-hoc” modifications, which are more readable.

Let me show you.

HeadlineText1('Some headline!', color: Colors.blue, fontSize: 30),

As you can see, it’s more readable and you know what’s going on here. A big blue headline :-)

Compare this to the Flutter-way of using the Text() widget, you’d have to write something like this.

Text('Some headline!', style: Theme.of(context).textTheme.headline1.copyWith(color: Colors.blue, fontSize: 12))

You’re still able to pass Text-specific properties like overflow, maxLines, etc… with the the addional (and in my opinion mostly overridden) properties like color and fontSize, which are usually passed to the ‘style’ property.

HeadlineText1('Some headline!', overflow: TextOverflow.ellipsis)

Where to find?

You can find it on pub.dev https://pub.dev/packages/flutter_text_helpers

Contributions, issues etc. can be filed at https://gitlab.com/ad-on-is/flutter_text_helpers

Hope you enjoy it!

Cheers!