Flutter Text Widget

The Text widget stands as one of the most fundamental components in Flutter development. Whether you're building a simple mobile app or a complex cross-platform application, mastering the Text widget is essential for creating polished user interfaces. This widget enables developers to display and style text strings throughout their Flutter applications with precision and flexibility.

Flutter's Text widget offers a rich set of customization options that go beyond basic text rendering. From typography adjustments to complex styling, this widget provides everything needed to create readable, accessible, and visually appealing text elements in your mobile applications.

Basic Implementation of Text Widget

Adding a Text widget to your Flutter application is straightforward:

Text(  
  'Hello Flutter!',  
)  

This simple implementation displays a plain text string on the screen. However, the true power of Flutter's Text widget lies in its customization capabilities.

Styling Your Text with TextStyle

The TextStyle class is what makes the Text widget in Flutter truly versatile. By applying a TextStyle, you can transform plain text into professionally styled content:

Text(  
  'Styled Flutter Text',  
  style: TextStyle(  
    fontSize: 24.0,  
    fontWeight: FontWeight.bold,  
    color: Colors.blue,  
    fontFamily: 'Roboto',  
    letterSpacing: 1.5,  
  ),  
)  

The TextStyle properties allow you to control various aspects of text appearance:

• fontSize: Adjusts the text size
• fontWeight: Controls text thickness (normal, bold, etc.)
• color: Sets the text color
• fontFamily: Specifies the font typeface
• letterSpacing: Adjusts spacing between characters
• wordSpacing: Controls spacing between words
• fontStyle: Applies styles like italic

Text Alignment and Direction

Controlling how text aligns within its container is crucial for proper layout design. Flutter's Text widget offers comprehensive alignment options:

Text(  
  'This text demonstrates alignment capabilities in Flutter',  
  textAlign: TextAlign.center,  
  textDirection: TextDirection.ltr,  
)  

The available alignment options include:

• TextAlign.left
• TextAlign.right
• TextAlign.center
• TextAlign.justify
• TextAlign.start
• TextAlign.end

Text direction (TextDirection) is particularly important for supporting multiple languages and internationalization in your Flutter applications.

Handling Text Overflow

When text content exceeds its container boundaries, Flutter's Text widget provides several overflow handling strategies:

Text(  
  'This is a very long text string that will likely exceed the available space in its container when rendered in a Flutter application',  
  overflow: TextOverflow.ellipsis,  
  maxLines: 2,  
)  

The overflow property accepts these values:

• TextOverflow.clip: Cuts off text at the boundary
• TextOverflow.fade: Fades the text at the edge
• TextOverflow.ellipsis: Adds "..." at the truncation point
• TextOverflow.visible: Allows text to overflow (default)

Combined with maxLines, these properties give you precise control over how text behaves when space is limited.

Rich Text and Text Spans

For more complex text formatting needs, Flutter provides the RichText widget and TextSpan class:

RichText(  
  text: TextSpan(  
    text: 'Flutter ',  
    style: TextStyle(color: Colors.black, fontSize: 20),  
    children: <TextSpan>[  
      TextSpan(  
        text: 'Rich',  
        style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),  
      ),  
      TextSpan(  
        text: ' Text',  
        style: TextStyle(fontStyle: FontStyle.italic, color: Colors.red),  
      ),  
    ],  
  ),  
)  

This approach allows different styling within a single text block—ideal for highlighting specific words or phrases in your Flutter application.

Text Decoration

The Text widget supports various decorations such as underlines, strikethroughs, and overlines:

Text(  
  'Decorated Flutter Text',  
  style: TextStyle(  
    decoration: TextDecoration.underline,  
    decorationColor: Colors.red,  
    decorationStyle: TextDecorationStyle.dotted,  
    decorationThickness: 2.0,  
  ),  
)  

You can combine multiple decorations using TextDecoration.combine():

decoration: TextDecoration.combine([  
  TextDecoration.underline,  
  TextDecoration.overline,  
]),  

Typography and Theme Integration

Flutter's Material Design implementation includes a comprehensive typography system that can be accessed through themes:

Text(  
  'Themed Flutter Text',  
  style: Theme.of(context).textTheme.headline1,  
)  

This approach ensures consistent typography throughout your application while adhering to platform design guidelines.

Selectable Text

Flutter also offers a SelectableText widget for enabling text selection:

SelectableText(  
  'This Flutter text can be selected by the user',  
  style: TextStyle(fontSize: 18.0),  
  onSelectionChanged: (selection, cause) {  
    print('Selected text: ${selection.textInside(this.text)}');  
  },  
)  

This widget is particularly useful for copy-paste functionality in your mobile applications.

Text Scaling and Accessibility

The Text widget automatically respects the system text scaling settings, making your Flutter application more accessible:

Text(  
  'Accessibility-friendly Flutter text',  
  textScaleFactor: 1.5,  
)  

Using textScaleFactor, you can override the system's text scaling preferences when necessary.

Related Topics

• Flutter Single Child Layout Widgets
• Flutter Multiple Child Layout Widgets
• Flutter Themes
• Flutter Scaffold Widget