Text and Styling

Text is the most common widget in any app, so it's worth knowing Text's options well, along with the theming system that keeps styling consistent across a whole app.

The Text widget

const Text(
  'Flutter makes it quick to build UIs.',
  style: TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.w600,
    color: Colors.black87,
    height: 1.4,
  ),
  textAlign: TextAlign.center,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

maxLines combined with overflow: TextOverflow.ellipsis is worth remembering — it truncates long text with a trailing "…" instead of overflowing or wrapping indefinitely, which is standard for things like list item titles or card previews with limited space.

Rich text with mixed styles

A single Text widget can only have one style, but Text.rich (or the underlying RichText widget) lets you mix styles within one block of text using TextSpan:

Text.rich(
  TextSpan(
    text: 'Total: ',
    style: const TextStyle(color: Colors.black87),
    children: [
      TextSpan(
        text: '\$59.99',
        style: TextStyle(fontWeight: FontWeight.bold, color: Colors.green.shade700),
      ),
    ],
  ),
)

This is the standard way to bold, color, or link a portion of a sentence without splitting it into separate Text widgets that would wrap onto different lines.

Don't hard-code styles everywhere

Repeating TextStyle(fontSize: 16, color: Colors.black87, ...) across dozens of widgets is a maintenance trap — change your brand color once, and you're now hunting through every screen. Flutter's Theme solves this by defining styles once, at the top of the app:

MaterialApp(
  theme: ThemeData(
    textTheme: const TextTheme(
      titleLarge: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
      bodyMedium: TextStyle(fontSize: 14, color: Colors.black87),
    ),
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
  ),
  home: const HomeScreen(),
)

Then, anywhere in the widget tree, pull those styles via Theme.of(context) instead of writing a new TextStyle from scratch:

Text('Section title', style: Theme.of(context).textTheme.titleLarge)

Extending a theme style

You rarely want a completely different style from the theme — usually just a small tweak. TextStyle.copyWith lets you take a theme style and override only what's different:

Text(
  'Section title',
  style: Theme.of(context).textTheme.titleLarge?.copyWith(
        color: Colors.indigo,
      ),
)

This keeps the font size and weight consistent with the rest of the app while adjusting only the color, so if the base titleLarge style changes later, this text updates automatically along with everything else.

Fonts

Custom fonts are declared in pubspec.yaml and referenced by family name:

flutter:
  fonts:
    - family: Poppins
      fonts:
        - asset: assets/fonts/Poppins-Regular.ttf
        - asset: assets/fonts/Poppins-Bold.ttf
          weight: 700

TextStyle(fontFamily: 'Poppins')

Setting fontFamily once inside ThemeData (rather than on individual TextStyles) applies it app-wide, which is almost always what you want. Getting comfortable with TextTheme and copyWith early will save significant rework as an app grows past a couple of screens.