Flutter commonly used Widget-Text

The Text component is the most commonly used component in our daily development, let's take a look at its description in the document first.

The Text widget is used to display text characters of a single style. The string may be displayed on multiple lines or on the same line, depending on the constraints placed on it by the layout.

The style parameter for the Text widget is optional. When this parameter is omitted, the text will use the closest enclosing DefaultTextStyle style (the original text is the closest enclosing DefaultTextStyle). If a given style's TextStyle.inherit property is true (the default), that given style will be merged with the closest DefaultTextStyle.

Using the Text.rich constructor, the Text widget can display paragraphs with TextSpans of different styles. The example below shows "Hello beautiful world" with different styles for each word.

Interaction
To make the Text react to touch events, wrap it in a GestureDetector widget, using the GestureDetector.onTap handler. In material design applications, consider using FlatButton instead, and if that's not appropriate, consider using InkWell instead of GestureDetector. To make parts of the text interactive, use RichText and specify a TapGestureRecognizer as a reference to the TextSpan.recognizer for the relevant part of the text.

The most basic UI elements, our most commonly used usage are as follows.

font size, color.
Commonly used styles, bold, italic, underlined, etc.
Single-line multi-line control.
Display out of bounds.
rich text.
Text shadow.
Click to interact.

Next, take a look at how to use it.

import 'package:flutter/material.dart';

class TextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
//    return Center(child: Text('我是一个text'));
    return Scaffold(
      body: Center(child: Text('我是一个text')),
    );
  }
}

Switching the above two pieces of code, we have the same settings for text, so why are there two different results? Remember the description of DefaultTextStyle above, when we have not set TextStyle, we will find the nearest textStyle setting around. So when we use Scaffold as the root node of the tree, the text can be as good as the nearby TextStyle.

import 'package:flutter/material.dart';

class TextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          '我是一个text 是一个text 是一个text 是一个text 是一个text 是一个text 是一个text 是一个text 是一个text',
          maxLines: 2, // 最大行数
          softWrap: true, // 是否自动换行
          overflow: TextOverflow.ellipsis, //字体截断方式
          style: TextStyle(
            shadows: <Shadow>[
              //阴影
              Shadow(
                color: Colors.green, //颜色
                offset: Offset(5, 10), // 影子的偏移
              )
            ],
            fontSize: 20, //字体大小
            color: Colors.blue, //字体颜色
            fontWeight: FontWeight.w900,
            fontStyle: FontStyle.italic, //倾斜、加粗
            decoration: TextDecoration.underline, //下划线
            decorationColor: Colors.red, //颜色
            decorationStyle: TextDecorationStyle.solid, // 装饰的类型
          ),
        ),
      ),
    );
  }
}

Rich Text You can use Text.rich or RichText + TextSpan to display rich text:

import 'package:flutter/material.dart';

class TextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text.rich(
          TextSpan(
            text: "hello ",
            children: <TextSpan>[
              TextSpan(
                text: "beautiful ",
                style: TextStyle(color: Colors.red),
              ),
              TextSpan(
                text: "wor",
                style: TextStyle(fontSize: 20),
              ),
              TextSpan(
                text: "ld",
                style: TextStyle(decoration: TextDecoration.lineThrough),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

interact

text interaction

import 'package:flutter/material.dart';

class TextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
          child: Text(
            '我是一个text',
          ),
          onTap: () {
            debugPrint("click");
          },
        ),
      ),
    );
  }
}

rich text interaction

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class TextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text.rich(
          TextSpan(
            recognizer: TapGestureRecognizer()..onTap = () {},
            text: "hello ",
            children: <TextSpan>[
              TextSpan(
                recognizer: TapGestureRecognizer()..onTap = () {},
                text: "beautiful ",
                style: TextStyle(color: Colors.red),
              ),
              TextSpan(
                text: "wor",
                style: TextStyle(fontSize: 20),
              ),
              TextSpan(
                text: "ld",
                style: TextStyle(decoration: TextDecoration.lineThrough),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Summary: The basic usage and attributes of text are written here first. Most of the attribute usages in Flutter are written in the documentation and Flutter source code comments, and the explanations are more detailed. The following articles will continue to introduce the usage methods of commonly used Widgets one by one. In the final series, a commercial-level project will be disclosed, and interested friends will pay attention. If you find any mistakes during the reading process, please leave a message to me in time, and I will correct it as soon as possible, so as not to mislead others.

Flutter commonly used Widget-Text

Guess you like