Flutter Text Widget | Flutter Text Widget Tutorial

In Flutter, the Text widget is used to display a piece of text with a single style. It’s a fundamental widget for rendering text in your app. Here’s an explanation of the Text widget in Flutter

Text(
  'Hello, Flutter!',
)

Key Properties

• data (String):
  • The actual text content that you want to display.
• style (TextStyle):
  • Defines the styling for the text, such as font size, color, and weight.
• textAlign (TextAlign):
  • Specifies the alignment of the text within its container (left, center, right).
• maxLines (int):
  • Sets the maximum number of lines for the text. If null, there is no limit.
• overflow (TextOverflow):
  • Determines how overflowing text should be handled, whether it should be clipped, ellipsized, or displayed on multiple lines.
• textDirection (TextDirection):
  • Specifies the directionality of the text, such as left-to-right or right-to-left.

Styling Text Widget in Flutter

Text(
  'Styled Text',
  style: TextStyle(
    fontSize: 20.0,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
    fontStyle: FontStyle.italic,
    decoration: TextDecoration.underline,
  ),
)

Multiline Text widget in Flutter

Text(
  'This is a long piece of text that might span multiple lines.',
  textAlign: TextAlign.center,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

Dynamic Text widget in Flutter

String dynamicText = 'Dynamic Text';

Text(
  dynamicText,
  style: TextStyle(fontSize: 18.0),
)

Justify Text widget in Flutter

Text(
  'This is a long piece of text that might span multiple lines.',
  textAlign: TextAlign.justify,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

Text Color in Flutter

Text(
  'Colored Text',
  style: TextStyle(
    color: Colors.blue, // Set the text color
  ),
)

Change Font Family of Text Widget in Flutter

Text(
  'Custom Font Family',
  style: TextStyle(
    fontFamily: 'YourCustomFont', // Replace with the name of your custom font
  ),
)

Underline Text Widget in Flutter

Text(
  'Underlined Text',
  style: TextStyle(
    decoration: TextDecoration.underline, // Add underline to the text
  ),
)

Flutter Text – Programmatically Change Font Size

class DynamicTextExample extends StatefulWidget {
  @override
  _DynamicTextExampleState createState() => _DynamicTextExampleState();
}

class _DynamicTextExampleState extends State<DynamicTextExample> {
  double fontSize = 16.0;

  void increaseFontSize() {
    setState(() {
      fontSize += 2.0; // Increase the font size by 2.0
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          'Dynamic Font Size',
          style: TextStyle(fontSize: fontSize),
        ),
        SizedBox(height: 20.0),
        ElevatedButton(
          onPressed: increaseFontSize,
          child: Text('Increase Font Size'),
        ),
      ],
    );
  }
}

For ease of use and automatic handling of various data types, including text truncation and scrolling for large text without rendering issues, along with custom separators for lists and smooth error handling, all these cases are managed seamlessly.

smart_text_widget is a Flutter package that provides a highly customizable RTText widget. It is designed to handle various scenarios such as null values, empty strings, numbers, lists, maps, and more. The widget also includes features like scrolling, truncation, and dynamic text display.