Skip to main content
Mapagam

Working with Text and Typography

1. Using Text Widget

Property Values Description
data String The text to display
style TextStyle The style to use for the text
textAlign TextAlign The alignment of the text
textDirection TextDirection The direction of the text (e.g., TextDirection.ltr)
overflow TextOverflow How to handle text that overflows the widget's bounds
maxLines int The maximum number of lines to display
softWrap bool Whether to wrap text to the next line

Example: Basic Text Widget

Text(
  "Hello, Flutter!",
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
  ),
)

Example: Text with Overflow

Text(
  "This is a very long text that will overflow and be truncated.",
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

2. Using Text.rich() Constructor

The Text.rich() constructor in Flutter allows you to display text with multiple styles and spans within a single widget. It's particularly useful for creating complex text layouts that require different formatting for various parts of the text.

Property Description Values
text The text to display, formatted with spans. TextSpan
style The default style to apply to the text. TextStyle
textAlign How the text should be aligned horizontally. TextAlign
textDirection The directionality of the text. TextDirection
overflow How visual overflow should be handled. TextOverflow
maxLines The maximum number of lines to display. int?

Example: Basic usage of Text.rich()

Text.rich(
  TextSpan(
    text: 'Hello ',
    style: TextStyle(fontSize: 16, color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: 'World',
        style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),
      ),
      TextSpan(
        text: '!',
        style: TextStyle(fontStyle: FontStyle.italic, color: Colors.red),
      ),
    ],
  ),
)

Example: Using Text.rich() with URLs

Text.rich(
  TextSpan(
    text: 'Visit ',
    style: TextStyle(fontSize: 14, color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: 'Flutter\'s official website',
        style: TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            // Handle tap
          },
      ),
      TextSpan(
        text: ' for more information.',
        style: TextStyle(fontSize: 14, color: Colors.black),
      ),
    ],
  ),
)

3. Styling Text

Property Values Description
style TextStyle Applies a TextStyle to the text.
textAlign TextAlign.left, .center, .right, .justify, .start, .end Aligns the text within its container.
textScaleFactor double Scales the size of the text.
maxLines int Limits the number of lines displayed.
overflow TextOverflow.clip, .fade, .ellipsis Defines how to handle overflowed text.

Example: Applying TextStyle

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
    fontFamily: 'Roboto',
  ),
)

Example: Text Alignment

Text(
  'Centered text',
  textAlign: TextAlign.center,
)

Example: Text Overflow

Text(
  'This is a very long text that will overflow',
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
)

4. Setting Font Properties

Property Values Description
fontFamily String or List<String> Name of the font family to use. Can be a single font or a list for fallbacks.
fontSize double Size of the font in logical pixels.
fontStyle FontStyle.normal, FontStyle.italic Style of the font (normal or italic).
fontWeight FontWeight.w100 to FontWeight.w900 Weight of the font (light to bold).
color Color Color of the text.
height double Line height multiplier (1.0 is default line height).

Example: Applying Font Properties

Text(
  'Hello Flutter!',
  style: TextStyle(
    fontSize: 24.0,
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.italic,
    color: Colors.blue,
    height: 1.5,
  ),
)
Note: The fontFamily property requires the font to be included in the project assets or available via system fonts.

5. Using Text Alignment

Property Values Description
textAlign TextAlign.left, TextAlign.right, TextAlign.center, TextAlign.justify, TextAlign.start, TextAlign.end Defines how the text is aligned within its container.

Example: Aligning Text to the Right

Text(
  'This text is right-aligned.',
  textAlign: TextAlign.right,
)
Note: TextAlign.start and TextAlign.end respect the text direction (LTR/RTL) of the app or widget.

6. Using Text Overflow

Property Values Description
overflow TextOverflow.clip, TextOverflow.fade, TextOverflow.ellipsis Controls how the text is displayed when it exceeds the available space.

Example: Text Overflow with Ellipsis

Text(
  "This is a very long text that will be truncated with an ellipsis if it exceeds the available space.",
  overflow: TextOverflow.ellipsis,
  maxLines: 1,
)

Example: Text Overflow with Fade

Text(
  "This is a very long text that will fade out at the end if it exceeds the available space.",
  overflow: TextOverflow.fade,
  maxLines: 1,
)

7. Using maxLines Property

The maxLines property in Flutter controls how many lines of text are displayed before truncating.

Property Values Description
maxLines int? Defines the maximum number of lines to display. If null, there's no limit.

Example: Limiting Text to Two Lines

Text(
  "This is a very long text that will be truncated after two lines if maxLines is set to 2.",
  maxLines: 2,
)
Note: When maxLines is set, the text will be truncated with an ellipsis (...) at the end if it exceeds the specified number of lines.

8. Using SelectableText Widget (copy functionality)

The SelectableText widget in Flutter allows users to select and copy text, which is useful for displaying content that users might want to copy elsewhere.

Property Description Values
text The text to display String
style Style to apply to the text TextStyle
selectionControls Customize how selection is handled TextSelectionControls
onLongPress Callback when the user long-presses on the text VoidCallback

Example: Basic SelectableText Usage

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("SelectableText Example")),
        body: Center(
          child: SelectableText(
            "This text can be selected and copied.",
            style: TextStyle(fontSize: 18),
          ),
        ),
      ),
    );
  }
}
Note: By default, SelectableText enables selection and copy functionality. You can customize the selection behavior using selectionControls.
Warning: Ensure that the content you make selectable is appropriate for copying, especially if it contains sensitive or copyrighted information.

9. Using RichText Widget

The RichText widget in Flutter allows you to display text with multiple styles and formatting options within a single widget. It is particularly useful for displaying complex text layouts that require different fonts, colors, or styles.

Property Description Values
text The TextSpan that defines the text content and its styling. TextSpan
textAlign How the text should be aligned horizontally. TextAlign.left, TextAlign.center, TextAlign.right, TextAlign.justify
textDirection The direction in which the text flows. TextDirection.ltr, TextDirection.rtl
softWrap Whether the text should wrap to a new line when it exceeds the available width. true, false
maxLines The maximum number of lines to display. null (unlimited), int

Example: Basic RichText Usage

<RichText>
  <TextSpan>
    <TextSpan text="Hello " style="{color: Colors.black}"/>
    <TextSpan text="World" style="{color: Colors.blue}"/>
  </TextSpan>
</RichText>

Example: RichText with Nested TextSpan

<RichText>
  <TextSpan>
    <TextSpan text="Flutter is " style="{color: Colors.black}"/>
    <TextSpan text="awesome" style="{color: Colors.green, fontWeight: FontWeight.bold}"/>
    <TextSpan text=" for building apps." style="{color: Colors.black}"/>
  </TextSpan>
</RichText>

10. Using DefaultTextStyle Widget

The DefaultTextStyle widget in Flutter allows you to define default text styles for all descendant widgets within its subtree. It's particularly useful when you want to apply a consistent style across multiple text elements without having to explicitly set the style on each one.

Property Description Values
style The default text style to apply to descendant widgets. TextStyle
overflow How visual overflow should be handled. TextOverflow
maxLines The maximum number of lines for the text. int?
textAlign How the text should be aligned horizontally. TextAlign

Example: Applying DefaultTextStyle

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: DefaultTextStyle(
            style: TextStyle(fontSize: 20, color: Colors.blue),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("Hello"),
                Text("World"),
                Text("Flutter"),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
Note: The DefaultTextStyle only affects descendant widgets. If you want to apply a style to all text in your app, consider using ThemeData.textTheme.

Was this article helpful?

Related Cheat Sheets