Flutter Text Widget Tutorial with All Properties in 2025

Introduction :

In the current time flutter is going to be boost in the tech market and now we are going to learn the flutter text widget. In this time the Text widget are use for the writing the any Text . Whenever you want to display text inside your app, you are use this widget. Even though it looks simple but it is very powerful because it gives you options to style, format, and customize text easily. In this tutorial, we will learn how the Flutter Text widget works along with some useful styling and formatting tips.and How we can Implement in the flutter Applications.

What is Flutter Text Widget?

The Text widget is a basic widget that displays a string of text on the screen App. In the Text Widget you just pass the text inside it, and Flutter shows it in your app UI with Text widget, you can control font size, color, weight, spacing, alignment, and also you can provide the many style like background color.

Example:

Text(
  'Hello Base Prommer',
  style: TextStyle(
    fontSize: 20,
    color: Colors.blue,
    fontWeight: FontWeight.bold,
  ),
)

Properties of the Flutter Text Widget

In the Properties of the text widget there are a various properties of text widget which is help to provide a style of the text in our application.

style
Text Align
maxline
overflow
softWrap

Style properties:

By using of the style properties we can customize the text widget style and their font,color , fontweight and many style.

Examples :

Text(
  "Hello Flutter",
  style: TextStyle(
    fontSize: 20,               // text size
    fontWeight: FontWeight.bold, // bold text
    color: Colors.blue,         // text color
    letterSpacing: 2,           // space between letters
    decoration: TextDecoration.underline, // underline
  ),
)

Text Align Properties :

It is use for the align the text in the center , left , right etc.

Text(
  "Hello Flutter",
  textAlign: TextAlign.center,
)

maxline Properties :

It is use for the how many line show in the text widget.

Text(
  "Hello Flutter Developer, how are you?",
  maxLines: 1,
)

Overflow Properties :

It is use in Flutter what to do when text is longer than maxLines.

Options:

TextOverflow.clip → Just cut it
TextOverflow.ellipsis → Show ...
TextOverflow.fade → Fade out the text

Text(
  "Hello Flutter Developer, how are you?",
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
)

Softwrap Properties :

Controls whether text can break into a new line.
true → Wrap to next line if space runs out
false → Stay in one line, even if it overflows

Text(
  "Hello Flutter Developer, how are you?",
  softWrap: false,
)

Conclusion :

The most popular method for displaying and styling text in your app is to use the Text widget in Flutter. It offers properties to control and is very customizable.
Using style (TextStyle for color, size, weight, font, decoration, and spacing) affects appearance.
Alignment:textAlign (left, right, center, justify).
Line control: with maxLines (limit number of lines).
The use of overflow (clip, ellipsis, fade, etc.) results in overflow behavior.
SoftWrap: is used to wrap behavior (whether text can break into multiple lines).

Read the Official Documentation : Click Here

FAQ : About Flutter Text Widget

Question 1 : How do I change the color and size of text in Flutter?

Answer :

Text(
  "Hello Flutter",
  style: TextStyle(color: Colors.red, fontSize: 22),
)

Question 2 : How can I align text in the center of the screen?

Text(
  "Centered Text",
  textAlign: TextAlign.center,
)

Question 3 : How do I show only one line of text and add “…” if it’s too long?

Text(
  "This is a very long text that will be truncated",
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
)

Question 4 : What is the difference between softWrap true and false?

Answer : softWrap: true → Text will wrap to the next line if it’s too long.
softWrap: false → Text will stay in one line and overflow.

Question 4 : How can I make my text bold, italic, or underlined?

Text(
  "Styled Text",
  style: TextStyle(
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.italic,
    decoration: TextDecoration.underline,
  ),
)

Flutter Text Widget Tutorial with Styling and Formatting Tips 2025