DISCOVER FLUTTER — WEEK #18

Combine Multiple Styles Per Line With RichText in Flutter

Photo by Josh Felise on Unsplash

In most situations, the Text widget will meet all your needs. Although if you come across a situation where you need multiple styles per line, then the Text widget is not your best friend.

Thankfully, the Flutter team has developed a RichText widget that covers such requirements.

If you want to display text that will have different fonts, color, size, etc. in the same line, use RichText with TextSpans.

For that, it is necessary to pass the tree of TextSpans to the text property, and then specify the style for each node.

It is much easier to understand and code something when we clearly see what we actually want to achieve. Prepared design is everything.

See in the code below how easily this look can be accomplished with the help of RichText widget.

Conclusion

If you’re a fan of short, interesting articles covering various Flutter topics and you want to get…