Flutter Lesson 10 of 83 3 min read

Text and TextStyle in Flutter

Learn the Text widget in Flutter: styling with TextStyle, theme text styles, alignment, overflow, rich text with TextSpan and selectable text.

On this page

Text displays a string. It is the most used widget in Flutter.

Styling #

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Padding(
          padding: EdgeInsets.all(24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('Plain text'),
              Text('Large and bold',
                  style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold)),
              Text('Coloured italic',
                  style: TextStyle(color: Colors.teal, fontStyle: FontStyle.italic)),
              Text('S P A C E D', style: TextStyle(letterSpacing: 4)),
              Text('Underlined',
                  style: TextStyle(decoration: TextDecoration.underline)),
              Text('Old price',
                  style: TextStyle(decoration: TextDecoration.lineThrough)),
            ],
          ),
        ),
      ),
    ),
  );
}

`TextStyle` property	Controls
`fontSize`	Size in logical pixels
`fontWeight`	`FontWeight.w400`, `w600`, `bold`
`color`	Text colour
`fontStyle`	Italic
`letterSpacing`, `wordSpacing`	Spacing
`height`	Line height, as a multiple of the font size
`decoration`	Underline, line-through
`fontFamily`	A custom font

Use the theme’s text styles #

Hard-coded sizes drift apart across an app. The theme provides a ready-made, consistent scale.

Text('Page title', style: Theme.of(context).textTheme.headlineMedium)
Text('Section', style: Theme.of(context).textTheme.titleLarge)
Text('Body copy', style: Theme.of(context).textTheme.bodyMedium)
Text('Caption', style: Theme.of(context).textTheme.labelSmall)

The families are display, headline, title, body and label, each in Large, Medium and Small. Adjust one with copyWith:

final style = Theme.of(context).textTheme.titleLarge?.copyWith(
  color: Theme.of(context).colorScheme.primary,
);

Alignment and overflow #

const Text(
  'A very long product description that will not fit on one line of a small phone screen',
  maxLines: 2,
  overflow: TextOverflow.ellipsis, // ends with ...
  textAlign: TextAlign.center,
)

`overflow`	Result
`TextOverflow.ellipsis`	Ends with “…”
`TextOverflow.fade`	Fades out
`TextOverflow.clip`	Cut off

textAlign only has a visible effect when the Text is wider than its content, for example inside a SizedBox or an Expanded.

Text in a Row #

A long Text inside a Row causes an overflow error, because the row gives it unlimited width. Wrap it in Expanded so it takes the remaining space and wraps.

Row(
  children: const [
    Icon(Icons.info_outline),
    SizedBox(width: 8),
    Expanded(child: Text('This long message now wraps onto the next line.')),
  ],
)

Several styles in one paragraph #

Text.rich(
  TextSpan(
    text: 'Total: ',
    children: [
      TextSpan(
        text: 'Rs. 1,499',
        style: const TextStyle(fontWeight: FontWeight.bold),
      ),
      const TextSpan(text: ' incl. tax', style: TextStyle(color: Colors.grey)),
    ],
  ),
)

Text the user can copy #

Text cannot be selected. Use SelectableText for things people may want to copy, such as an order number, or wrap a whole area in SelectionArea.

A default style for a subtree #

DefaultTextStyle.merge(
  style: const TextStyle(color: Colors.white),
  child: Column(children: const [Text('One'), Text('Two')]),
)

Respect the user’s text size #

People can enlarge text in their device settings, and Flutter scales Text to match. Do not fix the height of boxes that contain text. Test your screens with large text turned on.

Try it yourself #

Build a product card with a title in titleLarge, a two-line description that ends with an ellipsis, and a price line where the amount is bold and the currency is grey.