flutter
/

Flutter Text Widget – A Complete Guide with Examples

Last Sync: Today

On this page

9
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

flutter

Flutter Text Widget – A Complete Guide with Examples

What is the Text Widget?

The Text widget is one of the most fundamental widgets in Flutter. It displays a string of text with a single style. You can customize its appearance using the style property, control alignment, handle overflow, and more. The Text widget is lightweight and used everywhere – from app bars to buttons to long paragraphs.

Basic Usage

DARTRead-only
1
Text('Hello, Flutter!')

This will display the string with the default theme's text style (usually the bodyMedium style).

Styling Text with TextStyle

The style property takes a TextStyle object that can define font size, weight, color, decoration, font family, and more.

DARTRead-only
1
Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
    decoration: TextDecoration.underline,
    fontFamily: 'Poppins',
  ),
)

Text Alignment

Use textAlign to control how the text is aligned within its parent. The available values are: TextAlign.left, right, center, justify, start, end. The default depends on the text direction.

DARTRead-only
1
Text(
  'Centered text',
  textAlign: TextAlign.center,
)

For textAlign to have an effect, the widget's parent must provide enough width (e.g., a Container with a width, or a SizedBox). In a Column, the text may not be centered horizontally unless the parent is constrained.

Handling Text Overflow

When text exceeds the available space, you can control the overflow behavior using the overflow property. Common values:

    • TextOverflow.clip – cuts off the text at the edge.
    • TextOverflow.ellipsis – adds … at the end.
    • TextOverflow.fade – fades out the text.
    • TextOverflow.visible – allows the text to overflow its bounds.
DARTRead-only
1
Text(
  'This is a very long text that will definitely overflow the available space.',
  overflow: TextOverflow.ellipsis,
  maxLines: 1,
)

You often combine overflow with maxLines to limit the number of lines.

Line Control: maxLines and softWrap

  • maxLines: Limits the number of lines. Use with overflow to show an ellipsis when the limit is reached.
  • softWrap: If true, the text will wrap onto new lines when it reaches the edge. If false, it will overflow horizontally (and maxLines may be ignored). By default, softWrap is true.
DARTRead-only
1
Text(
  'This is a long text that will wrap onto multiple lines automatically.',
  softWrap: true,
)

Text(
  'This text will be limited to two lines and show an ellipsis if longer.',
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

Using Text with Theme

Instead of hard‑coding styles, you can leverage the app's theme. Use Theme.of(context).textTheme to access predefined text styles like headlineMedium, titleLarge, bodyMedium, etc. This ensures consistency across the app.

DARTRead-only
1
Text(
  'Headline',
  style: Theme.of(context).textTheme.headlineMedium,
)

Text Direction and Locale

You can control the text direction (e.g., for Arabic, Hebrew) using textDirection. The locale can be specified with locale to influence rendering of certain characters.

DARTRead-only
1
Text(
  'مرحبا',
  textDirection: TextDirection.rtl,
)

Key Takeaways

    • Text displays a string with a single style.
    • Use style with TextStyle to customize font, color, size, etc.
    • Control alignment with textAlign.
    • Manage overflow with overflow and maxLines.
    • Use softWrap to allow line breaks.
    • Prefer theme‑based styles for consistency and adaptability.
    • Always handle text overflow to avoid layout errors.

Try it yourself

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Text Widget Demo')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Hello, Flutter!',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.blue),
              ),
              SizedBox(height: 20),
              Text(
                'This text is centered and will wrap automatically if it is very long. It uses the default theme style and softWrap.',
                textAlign: TextAlign.center,
                softWrap: true,
              ),
              SizedBox(height: 20),
              Container(
                width: 200,
                child: Text(
                  'This is a long text that will be clipped with an ellipsis because it is constrained to a fixed width.',
                  overflow: TextOverflow.ellipsis,
                  maxLines: 1,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Test Your Knowledge

Q1
of 4

Which property of Text is used to limit the number of lines?

A
maxLine
B
lines
C
maxLines
D
lineLimit
Q2
of 4

How do you make text bold?

A
TextStyle(weight: 'bold')
B
TextStyle(fontWeight: FontWeight.bold)
C
TextStyle(bold: true)
D
Text(bold: true)
Q3
of 4

What does `TextOverflow.ellipsis` do?

A
Adds three dots at the end of the text
B
Fades out the text
C
Clips the text without any indication
D
Allows the text to overflow
Q4
of 4

What is the purpose of `softWrap`?

A
To wrap text onto new lines
B
To add a soft shadow
C
To enable animations
D
To make text selectable

Frequently Asked Questions

How do I make text bold?

Set fontWeight: FontWeight.bold in the TextStyle. You can also use other weights like FontWeight.w500, FontWeight.w800, etc.

How do I change the text color?

Set color: Colors.red (or any color) in the TextStyle. You can also use Theme.of(context).primaryColor to match the app theme.

What is the difference between `overflow: TextOverflow.ellipsis` and `overflow: TextOverflow.fade`?

ellipsis adds … at the end of the truncated text; fade gradually fades out the text at the edge, creating a smooth effect. Both require the text to be constrained (e.g., inside a Container with a width).

Why does `textAlign` not work inside a `Row`?

In a Row, the child text widget may not have a flexible width; it sizes itself to its content. To center text inside a Row, wrap it with Expanded or Flexible to give it available space.

Can I apply a gradient to text?

Directly, no. Use ShaderMask to apply a gradient to the whole text. Alternatively, you can use RichText with WidgetSpan and a custom painter, but that's complex. For simple cases, ShaderMask works well.

Previous

flutter icon widget

Next

flutter richtext

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.