Text widget and styling in Flutter

Introduction

The Text widget shows words on the screen. Styling makes the words look nice and clear.

To show a title or heading in an app screen.

To display a message or instruction to the user.

To label buttons or input fields.

To decorate text with colors, sizes, or fonts for better look.

To show dynamic text like scores or names.

Syntax

Flutter

Text(
  'Your text here',
  style: TextStyle(
    color: Colors.black,
    fontSize: 16,
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.italic,
    decoration: TextDecoration.underline,
  ),
  textAlign: TextAlign.center,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

The Text widget shows text on screen.

The style property lets you change color, size, weight, and more.

Examples

Simple text with default style.

Flutter

Text('Hello World')

Text colored blue and bigger font size.

Flutter

Text('Hello Flutter', style: TextStyle(color: Colors.blue, fontSize: 20))

Text that is bold and italic.

Flutter

Text('Bold and Italic', style: TextStyle(fontWeight: FontWeight.bold, fontStyle: FontStyle.italic))

Text with underline decoration.

Flutter

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

Sample App

This app shows a centered text with purple color, medium bold, italic style, and an overline decoration.

Flutter

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Text Widget Example')),
        body: const Center(
          child: Text(
            'Welcome to Flutter!',
            style: TextStyle(
              color: Colors.deepPurple,
              fontSize: 24,
              fontWeight: FontWeight.w600,
              fontStyle: FontStyle.italic,
              decoration: TextDecoration.overline,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

Important Notes

Use TextAlign to control text alignment inside its container.

Use maxLines and overflow to handle long text gracefully.

Colors come from the Colors class for easy use.

Summary

The Text widget displays words on the screen.

Styling is done with TextStyle to change color, size, weight, and decoration.

Text alignment and overflow help control how text fits in the space.