Flutter text widget

Working with Flutter Text Widgets

Text is one of the most fundamental elements in any application. Whether it’s displaying titles, labels, instructions, or content, effectively handling text is essential for creating user-friendly interfaces. In Flutter, the Text widget is the primary tool for displaying and styling text. Understanding how to use and customize it will help you build beautiful, readable, and interactive apps.

In this blog, we’ll dive deep into the Flutter Text widget, explore its properties, and show you how to style, align, and interact with text in Flutter.

Introduction to the Flutter Text Widget

The Text widget in Flutter is straightforward to use. It takes a string of text and renders it in the app’s user interface. You can use it to display simple labels, detailed content, or any other text-based elements in your Flutter app.

Here’s a basic example of how the Text widget works:

Text('Hello, Flutter!')

This widget displays the text “Hello, Flutter!” on the screen. However, the real power of the Text widget comes when you start using its various properties to customize the appearance and behavior of the text.

Key Properties of the Text Widget

The Text widget comes with several customizable properties that let you control everything from text alignment to font size and color. Let’s explore some of the most important ones:

style: The style property allows you to define the appearance of the text, such as the font, color, size, weight, and more. You can customize the TextStyle class to define these attributes.Example: Text('Styled Text', style: TextStyle( fontSize: 24, color: Colors.blue, fontWeight: FontWeight.bold, ), )
textAlign: This property controls how the text is aligned within its container. You can align text to the left, right, center, or justify it.Example: Text( 'Center Aligned Text', textAlign: TextAlign.center, )
maxLines: You can use this property to limit the number of lines the text can occupy. If the text exceeds the limit, it will be truncated.Example: Text( 'This is a very long text that will be truncated after two lines.', maxLines: 2, )
overflow: When the text exceeds its available space, the overflow property defines how it should behave. Common values include TextOverflow.ellipsis, which adds an ellipsis (...), or TextOverflow.fade, which fades out the text.Example: Text( 'This is a very long text that will overflow', overflow: TextOverflow.ellipsis, )
softWrap: This property determines whether the text should break into multiple lines if it doesn’t fit within a single line.Example: Text( 'This is a long line of text that will wrap to the next line', softWrap: true, )

Styling Text in Flutter

One of the most powerful aspects of Flutter’s Text widget is its ability to style text flexibly. You can customize the look and feel of the text by using the TextStyle class, which allows you to define attributes like:

Font Size: Change the size of the text using the fontSize property.
Font Weight: Adjust the weight (or thickness) of the text with the fontWeight property. You can use predefined values like FontWeight.bold or FontWeight.w300.
Font Family: Set the desired font using the fontFamily property. Flutter supports custom fonts, allowing you to import and use your own fonts.
Text Color: Control the color of the text using the color property. You can use any color from Flutter’s Colors class or define your own.

Example of Styling Text:

Text(
  'Flutter Text Styling',
  style: TextStyle(
    fontSize: 30,
    fontWeight: FontWeight.bold,
    color: Colors.green,
    fontStyle: FontStyle.italic,
    letterSpacing: 2.0,
  ),
)

This example will display a bold, green, italic text with additional letter spacing.

Custom Fonts in Flutter

Using custom fonts in your Flutter app allows you to create a unique and branded experience. Flutter makes it easy to integrate custom fonts. Here’s how you can do it:

Add Font Files: Download your desired font files (usually .ttf or .otf) and place them in your assets/fonts/ directory.
Update pubspec.yaml: Add a reference to the fonts in your pubspec.yaml file.

flutter:
  fonts:
    - family: CustomFont
      fonts:
        - asset: assets/fonts/CustomFont-Regular.ttf
        - asset: assets/fonts/CustomFont-Bold.ttf
          weight: 700

Use the Font: Now, you can apply the custom font using the fontFamily property in the TextStyle class.

Text(
  'Using Custom Font',
  style: TextStyle(
    fontFamily: 'CustomFont',
    fontSize: 20,
  ),
)

RichText Widget: Combining Multiple Text Styles

If you need to display a paragraph with different styles applied to specific parts of the text, you can use the RichText widget. This widget allows you to combine multiple text styles within the same paragraph, making it perfect for styling specific words or sections of text differently.

Example of RichText:

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

In this example, “Flutter” uses the default style, “is” is bold, and “amazing!” is blue and italic.

Text Alignment and Directionality

By default, the text aligns to the left (for left-to-right languages). However, you can change the alignment using the textAlign property. Common alignment options include:

TextAlign.left: Aligns the text to the left.
TextAlign.right: Aligns the text to the right.
TextAlign.center: Centers the text.
TextAlign.justify: Justifies the text, ensuring that each line has equal width.

Example of Center Aligned Text:

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

If you’re developing an app for languages that use right-to-left text (such as Arabic or Hebrew), you can use the TextDirection property to control the directionality of the text.

Directionality(
  textDirection: TextDirection.rtl,
  child: Text('مرحبا Flutter!'),
)

This will display the text in a right-to-left layout.

Interactive Text with GestureDetector

Text in Flutter doesn’t have to be static. You can make it interactive by wrapping the Text widget in a GestureDetector to handle events such as taps, long presses, and double taps. This is useful for creating clickable links or interactive labels in your app.

Example of Clickable Text:

GestureDetector(
  onTap: () {
    print('Text clicked!');
  },
  child: Text(
    'Tap Me!',
    style: TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
  ),
)

This example shows a piece of text that, when clicked, prints “Text clicked!” to the console.

TextOverflow and Ellipsis

When text overflows the available space, it can be truncated or wrapped. The TextOverflow property allows you to control how the text behaves when there isn’t enough room to display the entire string.

TextOverflow.clip: Clips the text without adding any visual indication.
TextOverflow.fade: Gradually fades out the overflowing text.
TextOverflow.ellipsis: Adds an ellipsis (...) to indicate that the text has been truncated.

Example of TextOverflow:

Text(
  'This is a very long line of text that will overflow',
  overflow: TextOverflow.ellipsis,
)

This will display the text with an ellipsis if it overflows the container.

Conclusion

The Text widget in Flutter is an incredibly versatile tool for displaying and styling text in your applications. From simple labels to richly formatted content, the Text and RichText widgets provide everything you need to build user-friendly and aesthetically pleasing text layouts.

By mastering properties like TextStyle, textAlign, TextOverflow, and interactive capabilities with GestureDetector, you can take full control over how text is presented in your Flutter apps.

Whether you’re designing static text, incorporating custom fonts, or building rich text layouts, the Flutter Text widget offers the flexibility and power to create amazing user experiences.

Explore Other Flutter Topics…

Tagged Custom fonts in Flutter, Flutter text styling, Flutter text widget, Interactive text in Flutter, RichText in Flutter