The Text in Flutter is not selectable by default. So you have to choose the SelectableText widget to make the text selectable. In this Flutter tutorial, let’s check how to change the selection color of the text. The SelectableText widget can be used for single-style text whereas SelectableText.rich constructor should be used for text with…
Icons have an important role in mobile app design. In this blog post, let’s check how to add an icon with text in Flutter. The Icon widget helps you to add icons to your Flutter project. By default, there’s no property to add a label or text with the icon. Hence, you have to make…
AppBar is one of the important UI components of material design. In this short and simple Flutter tutorial, let’s check how to change the default AppBar title color. The AppBar widget uses a Text widget to add the title. Hence, we can make use of the TextStyle class to change the color of the title….
The AppBar widget appears at the top of each screen in a Flutter app. The title of AppBar is aligned to left by default in Android devices. Let’s check how to align AppBar text to the center in Flutter easily. The AppBar class has a property title to add text. You can align this text…
Proper alignment of UI elements is a must for a good-looking mobile app. We always want to align text too so that it appears neatly. In this Flutter tutorial, let’s learn how to justify text in Flutter. Firstly, let’s see how text appears without justification. The output will be as given below. Justifying text will…
Line breaks are helpful to break text into multiple lines so that users can read the text properly. Let’s check how to add a line break for the Text widget in Flutter. In order to create line breaks, you just need to add \n to your text content. You have to insert \n and the…
As a mobile app developer, you may always want to style text properly to make the user interface elegant. In this Flutter tutorial, let’s learn how to set text background color easily. Normally, we don’t play with the text background color. But in scenarios like highlighting text, having a bright background color is helpful. The…
Sometimes, you may want to show text always in a specific case- lowercase or uppercase. In this short Flutter tutorial, let’s learn how to display Text always in lowercase. The Text widget doesn’t have any property related to capitalization. Hence, we should use Dart method toLowerCase() to obtain the desired result. See the code snippet…
Text is one of the most important widgets in Flutter to display text content. Let’s learn how to capitalize Text in Flutter easily. Even though TextField has a feature to capitalize text, there’s no inbuilt way in the Text widget to make text all caps. Hence, we have to use Dart method toUpperCase() to capitalize…
Adding shadows to different UI components can make your app’s UI more beautiful and more appealing. In this Flutter tutorial, let’s learn how to apply shadow to Text easily. You can style the Text widget using the TextStyle class. The TextStyle has shadows property that allows to add shadows to the text. See the following…
Styling text is an important part of mobile app UI design. Letter spacing helps to adjust the distance between each letter. Let’s check how to change the default letter spacing of Text in Flutter. TextStyle class has a property named letterSpacing that helps to change the letter spacing of the Text. You have to specify…
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…