Mastering: Flutter Text Widget Full Guide 2024 By Flutter Stuff

Are you looking to master text styling in Flutter? Look no further! This guide will walk you through the essential properties that control how text appears and behaves in your Flutter applications. Whether you’re a beginner or an experienced developer, understanding these properties will help you create visually appealing and user-friendly text elements.

The Flutter Text Widget is used to display a string of text with a single style. It is an essential widget for any application that requires textual content. By understanding the properties of the Text widget, you can create more flexible and visually appealing text displays.

Easy Text Widget Example

import 'package:flutter/material.dart';  
  
void main() { runApp(MyApp()); }  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
        theme: ThemeData(  
          primarySwatch: Colors.green,  
        ),  
        home: MyTextPage()  
    );  
  }  
}  
class MyTextPage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
          title:Text("Text Widget Example")  
      ),  
      body: Center(  
          child:Text("Welcome to Flutter Stuff Website")  
      ),  
    );  
  }  
}  

Properties of the Flutter Text Widget

Here we take a detailed look at all the properties of the text widget that we use in the Flutter app development and we will try to understand each widget with the help of a simple example. So here we go:

1. style

The style property allows you to customize the appearance of your text, such as the font size, weight, and color. It uses the TextStyle class.

Text(
  'Hello, Flutter Stuff!',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
)

In this example, the text “Hello, Flutter Stuff!” is styled to have a font size of 24, bold weight, and blue color. The TextStyle class provides a wide range of customization options, enabling you to tailor the text’s appearance to fit your application’s design.

2. strutStyle

The strutStyle property defines the strut style, which is used to adjust the vertical spacing and alignment of text. It uses the StrutStyle class.

Text(
  'Hello, Flutter!',
  strutStyle: StrutStyle(
    fontSize: 24,
    height: 1.5,
  ),
)

Here, the strutStyle is set with a font size of 24 and a height of 1.5. The strut style affects the spacing and alignment of text lines, providing consistent vertical spacing and alignment across different font sizes and styles.

3. textAlign

The textAlign property specifies how the text should be aligned horizontally within its container. It uses the TextAlign enum.

Text(
  'Hello, Flutter!',
  textAlign: TextAlign.center,
)

This example centers the text “Hello, Flutter!” within its container. The textAlign property can be set to various values like TextAlign.left, TextAlign.right, TextAlign.center, TextAlign.justify, and more, allowing you to control the horizontal alignment of your text.

4. textDirection

The textDirection property determines the direction in which text flows, such as left-to-right (LTR) or right-to-left (RTL). It uses the TextDirection enum.

Text(
  'Flutter! Stuff',
  textDirection: TextDirection.rtl,
)

In this example, the text “Flutter! Stuff” is set to flow from right to left using TextDirection.rtl. This property is crucial for supporting languages that are read from right to left, ensuring proper text alignment and readability.

5. locale

The locale property is used to specify the locale used to select region-specific glyphs or fonts.

Text(
  'Hello, Flutter!',
  locale: Locale('en', 'US'),
)

This example sets the locale to English (United States), which can be useful for selecting region-specific fonts or glyphs. The locale property helps in providing a localized experience for users based on their language and region preferences.

6. softWrap

The softWrap property indicates whether the text should break at soft line breaks.

Text(
  'Hello, Flutter! Welcome to the world of cross-platform development.',
  softWrap: true,
)

With softWrap: true, the text will wrap at soft line breaks, ensuring it fits within the container. If set to false, the text will not wrap, potentially causing it to overflow its container.

7. overflow

The overflow property controls how visual overflow should be handled.

Text(
  'This is a very long text that might not fit in one line.',
  overflow: TextOverflow.ellipsis,
)

In this example, the overflow property is set to TextOverflow.ellipsis, which truncates the text and adds an ellipsis if it overflows its container. Other options include TextOverflow.clip and TextOverflow.fade.

8. textScaleFactor

The textScaleFactor property scales the text size by the given factor.

Text(
  'Hello, Flutter!',
  textScaleFactor: 1.5,
)

Here, the text is scaled by a factor of 1.5, making it 50% larger than the default size. The textScaleFactor property is useful for adjusting text size dynamically based on user preferences or specific UI requirements.

Also Learn About: Container Widget in Flutter Mastery Guide

9. textScaler

The textScaler property allows you to specify a custom text scaler for the text.

Text(
  'Hello, Flutter!',
  textScaler: TextScaler.customScaler,
)

This example uses a custom text scaler, providing more control over how the text is scaled. Custom text scalers can be implemented to meet specific design needs or accessibility requirements.

10. maxLines

The maxLines property limits the maximum number of lines for the text.

Text(
  'Hello, Flutter! Welcome to the world of cross-platform development.',
  maxLines: 1,
)

In this example, the text is restricted to a single line with maxLines: 1. If the text exceeds one line, it will be truncated based on the overflow property setting. This property is useful for ensuring text does not occupy more space than intended.

11. semanticsLabel

The semanticsLabel property provides an alternative string for accessibility purposes.

Text(
  'Hello, Flutter!',
  semanticsLabel: 'Greeting text: Hello, Flutter!',
)

Here, the semanticsLabel is set to “Greeting text: Hello, Flutter!”, providing a clear description for screen readers and other accessibility tools. This property enhances the accessibility of your application by providing meaningful descriptions of text content.

12. textWidthBasis

The textWidthBasis property defines whether the width should be based on the width of the actual text or the maximum intrinsic width.

Text(
  'Hello, Flutter!',
  textWidthBasis: TextWidthBasis.longestLine,
)

In this example, the width of the text is based on the longest line with textWidthBasis: TextWidthBasis.longestLine. This property ensures the text container is appropriately sized based on the text content, avoiding clipping or unnecessary whitespace.

13. textHeightBehavior

The textHeightBehavior property defines how the height of the text should be applied.

Text(
  'Hello, Flutter!',
  textHeightBehavior: TextHeightBehavior(
    applyHeightToFirstAscent: false,
    applyHeightToLastDescent: false,
  ),
)

This example sets custom text height behavior, not applying the height to the first ascent or last descent. The textHeightBehavior property provides fine-grained control over how text height is calculated and rendered, ensuring consistent vertical alignment.

14. selectionColor

The selectionColor the property specifies the color of the selection highlight.

Text(
  'Hello, Flutter!',
  selectionColor: Colors.red,
)

Here, the selection highlight color is set to red. The selectionColor property enhances the user experience by providing a visible indication of selected text, improving interaction with editable text fields.

Also Learn About: Container Widget in Flutter Mastery Guide

What is Rich Text?

Rich Text allows you to display text with multiple styles within a single text widget. This is particularly useful when you need to emphasize certain parts of your text or create more complex text layouts.

Here’s an example of how to use Rich Text:

RichText(
  text: TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'Hello '),
      TextSpan(text: 'Flutter', style: TextStyle(fontWeight: FontWeight.bold)),
      TextSpan(text: ' Stuff!'),
    ],
  ),
)

This code creates a text that says “Hello bold world!” where only the word “bold” is in bold.

Rich Text is incredibly versatile. You can change not just the font weight, but also the color, size, font family, and more for different parts of your text. This makes it perfect for creating things like clickable links within text, or for highlighting specific words or phrases.

Conclusion

The Text widget in Flutter is versatile and powerful, offering a wide range of properties to customize the display of text in your applications. By understanding and utilizing these properties, you can create rich, responsive, and accessible text displays that enhance your application’s user experience. Implementing these properties effectively will ensure your text content is visually appealing and functional across different devices and languages.

FAQ Section