How to use Flutter Text Widget (2024) Code Examples

In my 4+ years experience in Flutter app development, I found that text is a super important part in a Flutter app to interact with the user or give guide about the app. Displaying a beautifully decorated text will engage the user more with your Flutter app and for that, we’ll have to use Flutter text widget.

We’ll be using this Flutter widget to not only display the text, but also to design it so beautiful that the user will enjoy spending time using our app.

In this detailed article, I’ll explain different parameters of text widget Flutter and their usage with practical and easy code examples.

What is Flutter Text Widget?

As we discussed in the intro that Flutter widget is used to show and design text in a Flutter app. Design includes the customization of text size, font size, color, etc.

Let’s now understand the practical implementation of the text widget Flutter.

Syntax

Text('I am a text')

Here you can see a simple text widget with a string. The string parameter is required because we have to show some text. Other parameters are optional.

Parameters of Text Widget

‘ ‘ required string parameter

style
textAlign

Examples to explain Flutter Text Widget

Example 1: ‘ ‘ required string parameter

As we’ve seen in the syntax section that the first parameter is string and its required but if you have a data that is not a string then you have to use the toString() method to make it string. See below:

Example 1.1

Text(5.toString())

If you pass it a non-string value then it will give an error.

Example 1.2

Text((5 * 7).toString())

Example 1.3

String name='Zeeshan';

Text('My name is $name')

In this example, I created a string variable and passed it to the string of text widget. You can use the dollar($) sign before the variable name.

Example 1.4

If there are some cases in which you want to show the dollar sign then just use a backslash before the sign of dollar. See below.

Text('The price is \$100 and name is $name')

Example 1.5

If you have a map of some items that have values nested and you want to show it inside a string then you have to use ‘${value}’. See the below example.

Text('Name: ${data['name']}    Age: ${data['age']}')

Keep in mind that if you are using values inside the string ‘ ‘, then you don’t need to use the ‘toString()’ method even if the data is not a string like the age value in the above example.

You can also show the data outside the string as well but the format will be the same. See below:

Text(data['name'])

Text(data['age'].toString()) // age is not a string value so have to use the toString() method

Example 2: style parameter

style: TextStyle()

The style parameter of text widget is used to decorate the string data. We can easily change the font size, color, make the text bold and more with this parameter. It takes a text style class and we’ll use parameters of this class to design our text.

Example 2.1: color parameter

TextStyle(color: Colors.redAccent)

flutter text color

Here we used the color parameter of TextStyle() class and that changes the Flutter text color. The default color of text looks like black. You can give color code to it as well or in other formats like show below:

Colors.redAccent.shade200
Color(0xff658494)
Colors.redAccent[400]

Colors.redAccent.withOpacity(.2)

You can play with them to see what works better for you.

Example 2.2: fontSize of text

fontSize: 21

The fontSize takes a double(decimal value) but we can pass integer to it as well. It sets the Flutter text widget size. For demonstration, I gave it a bigger value and you can see that the size of text is now bigger.

Example 2.3: fontWeight of Flutter Text Widget

 fontWeight: FontWeight.w100

The parameter ‘fontWeight’ is used to decide how much thickness the text will have. I gave it a font weight of 100 which made the text super thin. By default, it is approximately 400. The more value you give, the bolder the text gets. You can give the values like this:

FontWeight.w100 up to FontWeight.w900
FontWeight.normal

FontWeight.bold

Let’s try with bold. See below:

fontWeight: FontWeight.bold

Now we can see our Flutter text bold. You can play with different values until you get your desired text thickness.

Example 3: textAlign parameter

 textAlign: TextAlign.left

To define the horizontal position/alignment of text, we have use the textalign parameter. We can pass the TextAlign which is an enum. In the above example, I pass it the value left which means align the text to left. List of values the TextAlign takes are listed below:

left

right
center
justify

start
end

Let’s change the text alignment using these properties.

Example 3.1: left

Container(
        width: double.infinity,
        color: Colors.blue.shade100,
        child: Text('I am left aligned text', 
        textAlign: TextAlign.left),
      )

Here, I wrapped the text widget with Flutter container with some color and the screen’s width. I used it so you can clearly see the changes in text alignment.

I passed the left property of the enum TextAlign to the parameter textAlign. As a result, the text is show in the left side of container.

Example 3.1.1

flutter text align left

In this example, I passed a long text to show you that the alignment is left.

Example 3.2: right

TextAlign.right

Passing the right property to textAlign will make the alignment of text widget to right.

Example 3.2.1

text align right

I passed a long text here to show you that even for multiple lines, the alignment is right means text will start from right position.

Example 3.3: center

TextAlign.center

flutter text align center

We can use the center value of TextAlign to show the text in center.

Example 3.3.1

text center alignment

The text in multiline is also center-aligned.

Example 3.4: justify

TextAlign.justify

In order to justify the text alignment, use the justify value of TextAlign. If the text is so less that it’s on single line and less than the width, then you’ll see it on the left side. If the text is more than one line, then it’ll take the width completely as show in above image.

Showing the text in center alignment is done by using the center value of TextAlign.

Example 3.5: start

TextAlign.start

This start value is used to align the text at the start or you can say beginning of text direction. It’s right for RTL languages and it’s left for LTR languages.

Example 3.6: end

TextAlign.end

This end value simply align/position the text at end of the text direction. It is left for RTL languages and right for LTR languages.

Conclusion

We practically discussed how to easily use the Flutter text widget and its parameters to decorate and show text string. If you still have any issues regarding the text widget Flutter then feel free to leave a comment on this post or email me, I’ll be super happy to help you.

Do give a visit to my other posts on Flutter widgets as well to learn how you can make your Flutter app more professional and user-friendly. Thank you.