Flutter | Text Widgets

Flutter, Google’s open-source UI toolkit, has taken the app development world by storm, providing developers with a fast, easy way to build natively compiled applications across mobile, web, and desktop from a single codebase. Flutter is known for its flexibility in creating beautiful user interfaces for mobile, web, and desktop applications.

One of the most essential and commonly used components in Flutter is the Text widget. In this blog, we’ll dive deep into Text widgets, explore their properties, and see how they can be customized to enhance the user interface of your app.

What is a Text Widget?

The Text widget in Flutter is used to display a string of text with a single style. It’s the simplest widget for displaying text and is frequently used for displaying labels, instructions, or information within your application. Here’s a basic example:

Example:

Text(
    'Hello, Flutter!',
    style: TextStyle(fontSize: 24),
)

Customizing Text Style

Flutter’s TextStyle class allows you to customize text with various properties such as font size, color, weight, and more. Here’s how you can use it:

Example:

Text(
    'Hello, Flutter!',
    style: TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.bold,
        color: Colors.blue,
        letterSpacing: 2.0,
        wordSpacing: 5.0,
    ),
)

This example displays text in bold, with a custom color, letter spacing, and word spacing.

Text Alignment

Text alignment is crucial in UI design. The TextAlign property lets you align text within its container.

Example:

Text(
    'Center Aligned Text',
    textAlign: TextAlign.center,
    style: TextStyle(fontSize: 18),
)

You can choose from several alignment options like TextAlign.left, TextAlign.right, TextAlign.justify, and TextAlign.start.

Handling Overflow

When text exceeds its container, handling overflow properly is important. Flutter provides the overflow property to manage this.

Example:

Text(
    'This is a very long text that will be truncated.',
    style: TextStyle(fontSize: 16),
    overflow: TextOverflow.ellipsis,
)

Options for overflow include TextOverflow.clip, TextOverflow.fade, and TextOverflow.visible.

RichText Widget

The `RichText` widget is used for displaying text with multiple styles within the same widget. You can use `TextSpan` objects to define different styles for different parts of the text.

Example:

RichText(
    text: TextSpan(
        text: 'Hello',
        style: TextStyle(fontSize: 16, color: Colors.red),
        children: <TextSpan>[
            TextSpan(
                text: ' Flutter',
                style: TextStyle(fontSize: 20, color: Colors.blue),
            ),
        ],
    ),
)

Text Scaling and Accessibility

To ensure your text is accessible, Flutter supports text scaling, allowing text to adjust based on user preferences.

Example:

Text(
    'Hello  Text',
    style: TextStyle(fontSize: 16),
    textScaleFactor: 1.5, 
)

Text Decoration and Transformation

Flutter provides additional customization through text decoration and transformation options.

Example:

Text(
    'Decorated Text',
    style: TextStyle(
        fontSize: 20,
        decoration: TextDecoration.lineThrough,
        decorationColor: Colors.red,
        decorationStyle: TextDecorationStyle.dashed,
    ),
)

Text(
    'Uppercase Text',
    style: TextStyle(fontSize: 18),
    textAlign: TextAlign.center,
    textDirection: TextDirection.ltr,
    textScaleFactor: 1.0,
    overflow: TextOverflow.fade,
    softWrap: true,
)

With these, you can underline, strike through, or overline text, as well as transform it to uppercase or lowercase.

Conclusion:

The Text widget is a fundamental part of Flutter, providing a simple yet powerful way to display text in your applications. By understanding and utilizing its various properties and customization options, you can create rich, visually appealing, and accessible text elements in your Flutter apps. As you continue to explore Flutter, experimenting with Text widgets will undoubtedly be a key part of your UI development journey.

Subscribe to Notifications