iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Text Widget

By · Reviewed & last updated · Part of Flutter Tutorial

The Text widget renders a string with a style. RichText and Text.rich mix styles within one paragraph. Themes flow through Theme.of(context).textTheme — consistency without prop-drilling styles.

Text, RichText, theme, overflow

EXAMPLE
import 'package:flutter/material.dart';

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

    @override
    Widget build(BuildContext context) {
        final t = Theme.of(context).textTheme;

        return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
                // 1) Basic Text
                const Text('Hello, world'),

                // 2) With a style
                Text(
                    'Big heading',
                    style: t.headlineMedium?.copyWith(fontWeight: FontWeight.w700),
                ),

                // 3) Multi-line + overflow
                Text(
                    'A very long string that might wrap or get truncated…',
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    softWrap: true,
                ),

                // 4) Text.rich — different styles in one paragraph
                Text.rich(
                    TextSpan(
                        text: 'Posted by ',
                        style: t.bodyMedium,
                        children: [
                            TextSpan(
                                text: 'Ada Lovelace',
                                style: t.bodyMedium?.copyWith(
                                    fontWeight: FontWeight.bold,
                                    color: Theme.of(context).colorScheme.primary,
                                ),
                            ),
                            const TextSpan(text: ' on 2026-06-07'),
                        ],
                    ),
                ),

                // 5) RichText (no inherited DefaultTextStyle — explicit)
                const RichText(
                    text: TextSpan(
                        style: TextStyle(color: Colors.black87, fontSize: 14),
                        children: [
                            TextSpan(text: 'Inline '),
                            TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
                            TextSpan(text: ' and '),
                            TextSpan(text: 'italic', style: TextStyle(fontStyle: FontStyle.italic)),
                        ],
                    ),
                ),

                // 6) SelectableText — let users copy
                const SelectableText('Tap-and-hold to copy this'),

                // 7) Pre-defined theme styles — semantic
                Text('Display large',  style: t.displayLarge),
                Text('Title medium',   style: t.titleMedium),
                Text('Body small',     style: t.bodySmall),
                Text('Label small',    style: t.labelSmall),

                // 8) Localised numbers
                Text(NumberFormat.currency(locale: 'en_AU', symbol: '\$').format(1234.5)),

                // 9) Text scaling for accessibility
                Text('Respects user font size', textScaler: TextScaler.linear(1.2)),
            ],
        );
    }
}

Why it matters

Pull text styles from Theme.of(context).textTheme instead of hard-coded sizes. Dark mode, dynamic-type, and brand-restyles flow through one source of truth — no find-and-replace across 80 widgets.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
Text(
    'Hello',
    style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
)
Try it Yourself »

Discussion

Loading…