- Flutter Widget Livebook

Text

A run of text with a single style.

Example

Text(
  'Hello, Bob! How are you?',
  textAlign: TextAlign.center,
  overflow: TextOverflow.ellipsis,
  style: TextStyle(fontWeight: FontWeight.bold),
)

Props

textAlign

How the text should be aligned horizontally.

snippet: TextPropTextAlign

import 'package:flutter/material.dart';

class SnippetTextPropTextAlign extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Container(
      width: 412,
      alignment: Alignment.center,
      child: Wrap(
        spacing: 12,
        runSpacing: 12,
        children: <Widget>[
          _DemoBox(
            label: 'TextAlign.left',
            child: Text(
              'The quick brown fox jumps over the lazy dog',
              textAlign: TextAlign.left,
            ),
          ),
          _DemoBox(
            label: 'TextAlign.right',
            child: Text(
              'The quick brown fox jumps over the lazy dog',
              textAlign: TextAlign.right,
            ),
          ),
          _DemoBox(
            label: 'TextAlign.center',
            child: Text(
              'The quick brown fox jumps over the lazy dog',
              textAlign: TextAlign.center,
            ),
          ),
          _DemoBox(
            label: 'TextAlign.justify',
            child: Text(
              'The quick brown fox jumps over the lazy dog',
              textAlign: TextAlign.justify,
            ),
          ),
          _DemoBox(
            label: 'TextAlign.start',
            child: Text(
              'The quick brown fox jumps over the lazy dog',
              textAlign: TextAlign.start,
            ),
          ),
          _DemoBox(
            label: 'TextAlign.end',
            child: Text(
              'The quick brown fox jumps over the lazy dog',
              textAlign: TextAlign.end,
            ),
          ),
        ],
      ),
    );
  }
}

class _DemoBox extends StatelessWidget {
  final String label;
  final Widget child;

  const _DemoBox({Key key, this.label, this.child}) : super(key: key);

  
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(label, style: TextStyle(fontSize: 12)),
        SizedBox(height: 2),
        Container(
          padding: EdgeInsets.all(12),
          width: 200,
          color: Colors.blue[50],
          child: child,
        )
      ],
    );
  }
}

Values:

  • left

Align the text on the left edge of the container.

  • right

Align the text on the right edge of the container.

  • center

Align the text in the center of the container.

  • justify

Stretch lines of text that end with a soft line break to fill the width of the container.
Lines that end with hard line breaks are aligned towards the [start] edge.

  • start

Align the text on the leading edge of the container.
For left-to-right text ([TextDirection.ltr]), this is the left edge. For right-to-left text ([TextDirection.rtl]), this is the right edge.

  • end

Align the text on the trailing edge of the container.
For left-to-right text ([TextDirection.ltr]), this is the right edge. For right-to-left text ([TextDirection.rtl]), this is the left edge.

textDirection

The directionality of the text.

This decides how [textAlign] values like [TextAlign.start] and [TextAlign.end] are interpreted.

This is also used to disambiguate how to render bidirectional text. For example, if the [data] is an English phrase followed by a Hebrew phrase, in a [TextDirection.ltr] context the English phrase will be on the left and the Hebrew phrase to its right, while in a [TextDirection.rtl] context, the English phrase will be on the right and the Hebrew phrase on its left.

Defaults to the ambient [Directionality], if any.

snippet: TextPropTextDirection

import 'package:flutter/material.dart';

class SnippetTextPropTextDirection extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Container(
      width: 360,
      alignment: Alignment.center,
      child: Column(
        children: <Widget>[
          _DemoCard(
            label: 'TextDirection.ltr',
            child: Text(
              'The quick brown fox jumps over the lazy dog',
              textDirection: TextDirection.ltr,
            ),
          ),
          _DemoCard(
            label: 'TextDirection.rtl',
            child: Text(
              'The quick brown fox jumps over the lazy dog',
              textDirection: TextDirection.rtl,
            ),
          ),
        ],
      ),
    );
  }
}

class _DemoCard extends StatelessWidget {
  final String label;
  final Widget child;

  const _DemoCard({Key key, this.label, this.child}) : super(key: key);

  
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(label, style: TextStyle(fontSize: 12)),
        Container(
          padding: EdgeInsets.all(12),
          margin: EdgeInsets.only(top: 2),
          color: Colors.blue[50],
          width: 200,
          child: child,
        )
      ],
    );
  }
}

Values:

  • rtl

The text flows from right to left (e.g. Arabic, Hebrew).

  • ltf

The text flows from left to right (e.g., English, French).

Related Links

  1. Example
  2. Props
  3. Related Links