Flutter Tutorials

Gradients can help you to create a visually appealing user interface. Let’s learn how to create Text with gradient colors in Flutter. I hope this Flutter tutorial will be useful for you. You can make use of Paint and ui.Gradient.linear with TextStyle to create beautiful gradient texts. See the following code snippet. This is a … Read more

Styling text is an important part of designing the UI of a mobile app. Sometimes, you may want to create bordered text to show colorful and elegant headlines. Let’s learn how to create bordered text in Flutter. The Paint class in Flutter helps to draw on Canvas. By combining the Paint class and TextStyle we … Read more

Text underlines are used to show the significance of a particular word or sentence. A wavy underline is apt for showing errors such as grammar mistakes. Let’s learn how to add wavy text underlining in Flutter. The TextDecoration class helps to draw underlines whereas TextDecorationStyle helps to make that underline wavy. See the following code … Read more

A proper line height increases the readability of your app’s text content. In this Flutter tutorial, let’s see how to change the default line height of the Text widget. The TextStyle class is used to stylize the Text widget in Flutter. The height property of the TextStyle class helps to set line height. See the … Read more

Opacity is an important aspect while designing mobile apps. Sometimes, you may want to change the opacity of the text instead of using a solid opaque color. Let’s learn how to change the Text opacity in Flutter. The TextStyle class handles all the style aspects of the Text widget. With the help of Color.withOpacity method … Read more

Italic text is used to emphasize words or sentences of text content. In this short Flutter tutorial, let’s learn how to create Italic text. In order to make a Text italic or bold you have to make use of TextStyle. The TextStyle and FontStyle class helps us to make the text Italic. See the following … Read more

The Text widget can be considered as one of the most important widgets in Flutter. Let’s learn how to show bold text in Flutter easily. The TextStyle class and its property fontWeight help us to make Text bold in Flutter. See the following code snippet. The output text will become bold. As you see, the … Read more

The importance of padding in mobile app design is very high. The padding helps users to identify different elements of the layout easily. In this short Flutter tutorial, let’s learn how to add padding to Text. The Padding widget in Flutter helps to apply predefined padding to its children. In the case of Text, you … Read more

By default, text wrapping is enabled in the Flutter Text widget. Thus, the text content breaks at soft line breaks. Let’s check how to disable this Text Wrap feature in Flutter. The Text widget has a property named softWrap that controls soft wrapping. Let’s check how the Text acts when the softWrap is enabled. As … Read more

Whenever we use dynamic text content the chances are high that the content overflows the predefined size of the Text. In this Flutter tutorial, let’s learn how to handle Text overflow with multiple options. We use maxLines property of text to limit the number of lines and the overflow property decides how to truncate the … Read more