Text In Flutter

Text In Flutter

Text widget is a used to display a string of text. In this section, you will learn how to use text widget, style text, align text, and handle overflow.

Example 1: Display Text In Flutter

In this example, you will learn how to display your name using Text widget.

Text('Raj Sharma')

Example 2: Center Text In Flutter

In this example, you will learn how to center text in flutter. In center widget, you can pass any widget as a child. Here we are passing Text widget as a child.

Center(
  child: Text('Raj Sharma'),
)

Example 3: Styling Text In Flutter

In this example, you will learn how to style text in flutter. You will learn to change font size, font weight, and font color.

Text(
    'Raj Sharma',
    style: TextStyle(
      fontSize: 24,
      fontWeight: FontWeight.bold,
      color: Colors.blue,
    ),
)

Example 4: Align Text In Flutter

In this example, you will learn how to align text in flutter. You will learn to align text to left, right, and center.

Center(
  child: Text(
    'Hello I am Mark and I am a Flutter Developer at Technology Channel.',
    textAlign: TextAlign.center,
  ),
)

Example 5: Underline Text In Flutter

In this example, you will learn how to underline text in flutter. You will learn to underline text using decoration property.

Text(
  'Raj Sharma',
  style: TextStyle(
    decoration: TextDecoration.underline,
  ),
)

Example 6: Text With Background Color In Flutter

In this example, you will learn how to add background color to text in flutter. You will learn to add background color using backgroundColor property.

Text(
  'Raj Sharma',
  style: TextStyle(
    backgroundColor: Colors.blue,
    fontSize: 20,
  ),
)

Example 7: Handle Text Overflow In Flutter

In this example, you will learn how to handle overflow in flutter. You will learn to handle overflow using overflow property.

Text(
  'A very long text that might not fit the screen. '*10,
  // try commenting the below line and see the difference
  overflow: TextOverflow.ellipsis,
)