Skip to content

Latest commit

 

History

History
135 lines (112 loc) · 4.72 KB

README.md

File metadata and controls

135 lines (112 loc) · 4.72 KB
Raw

Text Widgets

Text

A run of text with a single style.

  • The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.

  • The style argument is optional. When omitted, the text will use the style from the closest enclosing DefaultTextStyle. If the given style's TextStyle.inherit property is true (the default), the given style will be merged with the closest enclosing DefaultTextStyle. This merging behavior is useful, for example, to make the text bold while using the default font family and size.

Basic Example

Text(
  '你好, Flutter? 233333',
  // 'The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.',
  // textAlign: TextAlign.center,
  overflow: TextOverflow.ellipsis,
  style: const TextStyle(fontWeight: FontWeight.bold),
)

Height

Row(children: [
  Text(
    "中文",
    style: TextStyle(
      fontSize: 24,
    ),
  ),
  Text(
    "123",
    style: TextStyle(
      fontSize: 24,
    ),
  ),
  Text(
    "English",
    style: TextStyle(
      fontSize: 24,
    ),
  ),
])

Select

SelectionArea(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text('Selectable text'),
      SelectionContainer.disabled(child: Text('Non-selectable text')),
      Text('Selectable text'),
    ],
  ),
);

Long press on amulator to select.

Exercise

  • Run examples

RichText

  • The RichText widget displays text that uses multiple different styles. The text to display is described using a tree of TextSpan objects, each of which has an associated style that is used for that subtree. The text might break across multiple lines or might all be displayed on the same line depending on the layout constraints.

  • Text displayed in a RichText widget must be explicitly styled. When picking which style to use, consider using DefaultTextStyle.of the current BuildContext to provide defaults. For more details on how to style text in a RichText widget, see the documentation for TextStyle.

  • Consider using the Text widget to integrate with the DefaultTextStyle automatically. When all the text uses the same style, the default constructor is less verbose. The Text.rich constructor allows you to style multiple spans with the default text style while still allowing specified styles per span.

Example

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: _buildBasic(context),
    );
  }

  Widget _buildBasic(context) {
    return RichText(
      text: TextSpan(
        text: 'Hello ',
        style: DefaultTextStyle.of(context)
            .style
            .copyWith(fontSize: 24, color: Colors.blue),
        children: const [
          TextSpan(
            text: 'bold',
            style: TextStyle(
              fontWeight: FontWeight.bold,
              color: Colors.black,
            ),
          ),
          TextSpan(text: ' world!'),
        ],
      ),
    );
  }

  Widget _buildTextRich() {
    return Text.rich(
      TextSpan(
        text: 'Hello', // default text style
        children: [
          TextSpan(
              text: ' beautiful ',
              style: TextStyle(fontStyle: FontStyle.italic)),
          TextSpan(
              text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
        ],
      ),
    );
  }
}

Exercise

  • Run examples