How to use Flutter Text Widget

Text(5.toString())

Example 1.2

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

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:

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:

1. FontWeight.w100 up to FontWeight.w900
2. FontWeight.normal
3. 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 used the textalign parameter. If you’re working with dynamic text lists, then please try using ListView.builder to efficiently render large sets of text-based items. We can pass the TextAlign, which is an enum. In the above example, I pass it the value left, which means to align the text to left. The list of values the TextAlign takes is listed below:

1. left
2. right
3. center
4. justify
5. start
6. 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 a 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 shown on the left side of the container.

Example 3.1.1

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

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

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

Example 3.3.1

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 short 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 shown in the 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 the beginning of the 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.