The Text property

Const Text(this.data, // display Text {Key Key, this.style,// font style this.textAlign,// Text alignment,left right independent of textDirection, TextDirection affects this.textDirection,// The direction of the text, not the direction in which the text is arranged, but whether the text is displayed left or right after a line break. this.locale,//? This. softWrap,// whether to wrap text beyond the screen, defaults to true, does not wrap text beyond the screen, does not display this.overflow,// When softWrap is false, or text beyond maxLines, TextScaleFactor,// Font size multiplier, TextScaleFactor * fontSize this.maxLines,// This. SemanticsLabel,//? })Copy the code
TextAlign Text alignment
  • Textalign. left left alignment is not affected by textDirection
  • Textalign. right is not affected by textDirection
  • The center of textalign.center is not affected by textDirection
  • Textalign.justify ADAPTS to both ends
  • Textalign. start If textDirection is LTR, start means left aligned, if textDirection is RTL, start means right aligned.
  • Textalign.end If textDirection is LTR, end means right-aligned, if textDirection is RTL, end means left-aligned

In the absence of textDirection, textDirection defaults to LTR:

Text("123456789   textAlign: TextAlign.left",style: TextStyle(fontSize: 30,color: Colors.red),textAlign: TextAlign.left,),
Divider(height: 1,color: Colors.grey,),
Text("123456789   textAlign: TextAlign.right",style: TextStyle(fontSize: 30,color: Colors.blue),textAlign: TextAlign.right,),
Divider(height: 1,color: Colors.grey,),
Text("123456789   textAlign: TextAlign.center",style: TextStyle(fontSize: 30,color: Colors.green),textAlign: TextAlign.center,),
Divider(height: 1,color: Colors.grey,),
Text("123456789   textAlign: TextAlign.justify",style: TextStyle(fontSize: 30,color: Colors.red),textAlign: TextAlign.justify,),
Divider(height: 1,color: Colors.grey,),
Text("123456789   textAlign: TextAlign.start",style: TextStyle(fontSize: 30,color: Colors.blue),textAlign: TextAlign.start,),
Divider(height: 1,color: Colors.grey,),
Text("123456789   textAlign: TextAlign.end",style: TextStyle(fontSize: 30,color: Colors.green),textAlign: TextAlign.end,),
Copy the code

TextDirection is RTL:

Text("textDirection: TextDirection.rtl,   textAlign: TextAlign.left",style: TextStyle(fontSize: 20,color: Colors.red),textAlign: TextAlign.left,textDirection: TextDirection.rtl,),
Divider(height: 1,color: Colors.grey,),
ext("textDirection: TextDirection.rtl,   textAlign: TextAlign.right",style: TextStyle(fontSize: 20,color: Colors.blue),textAlign: TextAlign.right,textDirection: TextDirection.rtl,),
Divider(height: 1,color: Colors.grey,),
Text("textDirection: TextDirection.rtl,   textAlign: TextAlign.center",style: TextStyle(fontSize: 20,color: Colors.green),textAlign: TextAlign.center,textDirection: TextDirection.rtl,),
Divider(height: 1,color: Colors.grey,),
Text("textDirection: TextDirection.rtl,   textAlign: TextAlign.justify",style: TextStyle(fontSize: 20,color: Colors.red),textAlign: TextAlign.justify,textDirection: TextDirection.rtl,),
Divider(height: 1,color: Colors.grey,),
Text("textDirection: TextDirection.rtl,   textAlign: TextAlign.start",style: TextStyle(fontSize: 20,color: Colors.blue),textAlign: TextAlign.start,textDirection: TextDirection.rtl,),
Divider(height: 1,color: Colors.grey,),
Text("textDirection: TextDirection.rtl,   textAlign: TextAlign.end",style: TextStyle(fontSize: 20,color: Colors.green),textAlign: TextAlign.end,textDirection: TextDirection.rtl,),
Divider(height: 1,color: Colors.grey,),
Copy the code
Whether softWrap text is wrapped automatically
  • Defaults to true to wrap
  • If the value is false, only one row is displayed and the rest is not

            Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",style: TextStyle(fontSize: 20),softWrap: true,),
            Divider(height: 1,color: Colors.grey,),
            Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",style: TextStyle(fontSize: 20),softWrap: false,),
            Divider(height: 1,color: Colors.grey,),
Copy the code
The effect of overflow text on the trailing text in the displayable range after overflow text exceeds the number of lines
MaxLines The maximum number of lines that text can display

Overflow value:

  • The textoverflow. clip is directly truncated
  • The end of textoverflow. ellipsis shows…
  • Textoverflow. fade effect

The following situations:

  • When softWrap is false

            Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",style: TextStyle(fontSize: 20),softWrap: false,overflow: TextOverflow.clip,),
            Divider(height: 1,color: Colors.grey,),
            Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",style: TextStyle(fontSize: 20),softWrap: false,overflow: TextOverflow.ellipsis,),
            Divider(height: 1,color: Colors.grey,),
            Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",style: TextStyle(fontSize: 20),softWrap: false,overflow: TextOverflow.fade,),
Copy the code
  • After passing maxlines

            Divider(height: 1,color: Colors.grey,),
            Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",style: TextStyle(fontSize: 35),maxLines: 2,overflow: TextOverflow.clip,),
            Divider(height: 1,color: Colors.grey,),
            Text("bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb",style: TextStyle(fontSize: 35),maxLines: 2,overflow: TextOverflow.ellipsis,),
            Divider(height: 1,color: Colors.grey,),
            Text("ccccccccccccccccccccccccccccccccccccccccccccccccccccccccc",style: TextStyle(fontSize: 35),maxLines: 2,overflow: TextOverflow.fade,),
Copy the code
TextScaleFactor Text size multiplier factor
  • Text actual size =textScaleFactor * fontSize

            Divider(height: 1,color: Colors.grey,),
            Text("aaaaaaaaaa",style: TextStyle(fontSize: 10),textScaleFactor: 1,),
            Divider(height: 1,color: Colors.grey,),
            Text("bbbbbbbbbb",style: TextStyle(fontSize: 10),textScaleFactor: 2,),
            Divider(height: 1,color: Colors.grey,),
            Text("cccccccccc",style: TextStyle(fontSize: 10),textScaleFactor: 3,),
            Divider(height: 1,color: Colors.grey,),
            Text("dddddddddd",style: TextStyle(fontSize: 30),textScaleFactor: 1,),
Copy the code

TextStyle

Const TextStyle({this.inherit = true,//true display text false hide text this.color,// font color this.backgroundColor,// backgroundColor FontSize,// fontSize this.fontWeight,// fontWeight bold this.fontStyle,// fontStyle italic or non-italic this.letterSpacing,// spacing between letters TextBaseline,//? This. height,// line height =height * fontSize this.locale,//? This. Foreground,// Paint()... Color = "foreground"; color= "foreground"; color= "foreground"; color= "foreground"; Color = short for backgroundColor, so backgroundColor and background can not exist at the same time this.shadows,// text shadow effect this.shadows,// add lines to the text, underline, underline, etc. This. DecorationStyle,// This. DecorationStyle,// This. DebugLabel,//?Copy the code
inherit
  • True Displays text
  • False Do not display text

            Divider(height: 1,color: Colors.grey,),
            Text("aaaaaaaa",style: TextStyle(fontSize: 30,inherit: true),),
            Divider(height: 1,color: Colors.grey,),
            Text("aaaaaaaa",style: TextStyle(fontSize: 30,inherit: false),),
            Divider(height: 1,color: Colors.grey,),
            Text("bbbbbbbb",style: TextStyle(fontSize: 35,color: Colors.red,inherit: true),),
            Divider(height: 1,color: Colors.grey,),
            Text("cccccccc",style: TextStyle(fontSize: 40,inherit: false),),
            Divider(height: 1,color: Colors.grey,),
            Text("dddddddd",style: TextStyle(fontSize: 45,color: Colors.red,inherit: false),),
            Divider(height: 1,color: Colors.grey,),
            Text("eeeeeeee",style: TextStyle(fontSize: 45,color: Colors.red,inherit: true),),
Copy the code
Color = color
FontSize fontSize

Divider(height: 1,color: Colors.grey,), Text("aaaaaaaa",style: TextStyle(fontSize: 30),), Divider(height: 1,color: Color.grey,), Text(" BBBBBBBB ",style: TextStyle(fontSize: 35,color: color.red),),// Select the enumerated color Divider(height: 1,color: Colors.grey,), Text("cccccccc",style: TextStyle(fontSize: 40,color: Color.red [200]),),// Select the enumerated Colors [200]. Divider(height: 1,color: color.grey,), Text(" DDDDDDDD ",style: TextStyle(fontSize: 45,color: blue) Color.fromargb (100, 200, 0, 0)),),// Generate the Color Divider(height: 1, Color: color.grey,), Text("eeeeeeee",style: TextStyle(fontSize: 50,color: color.fromrgbo (200, 0, 0, 0.5)),)Copy the code
Heavy fontWeight word

Divider(height: 1,color: Colors.grey,), Text("FontWeight.normal",style: TextStyle(fontSize: 45,fontWeight: Divider(height: 1,color: color.grey,), Text(" fontweight.bold ",style: TextStyle(fontSize: 45,fontWeight: fontweight.bold),),// Display the Divider(height: 1,color: color.grey,), Text(" fontweight.w100 ",style: TextStyle(fontSize: 45,fontWeight: fontweight.w100),),// Shows the light Divider in bold (height: 1,color: Colors.grey,), Text("FontWeight.w200",style: TextStyle(fontSize: 45,fontWeight: "Divider(height: 1,color: color.grey,), Text(" fontweight.w300 ",style: TextStyle(fontSize: 45,fontWeight: fontweight.w300),),// Show the Divider(height: 1,color: color.grey,), Text(" fontweight.w400 ",style: TextStyle(fontSize: 45,fontWeight: fontweight.w400),),// Shows the Divider in bold (height: 1,color: Colors.grey,), Text("FontWeight.w500",style: TextStyle(fontSize: 45,fontWeight: "Divider(height: 1,color: color.grey,), Text(" fontweight.w600 ",style: TextStyle(fontSize: 45,fontWeight: fontweight.w600),),// Show the Divider(height: 1,color: color.grey,), Text(" fontweight.w700 ",style: TextStyle(fontSize: 45,fontWeight: fontweight.w700),),// Shows the Divider in bold (height: 1,color: Colors.grey,), Text("FontWeight.w800",style: TextStyle(fontSize: 45,fontWeight: "Divider(height: 1,color: color.grey,), Text(" fontweight.w900 ",style: TextStyle(fontSize: 45,fontWeight: fontweight.w900),),// The weight in bold is the same as in boldCopy the code

Lerp (weight1,weight2,double t) takes a linear value between two values

Divider(height: 1,color: color.grey,), Text(" fontweight.lerp (fontweight.w100, fontweight.w900, 0.1)",style: TextStyle(fontSize: 25,fontWeight: fontweight.lerp (fontweight.w100, fontweight.w900, 0.1)),), Color: color.grey,), Text(" fontweight.lerp (fontweight.w100, fontweight.w900, 0.2)",style: TextStyle(fontSize: 25,fontWeight: fontweight.lerp (fontweight.w100, fontweight.w900, 0.2)),),// Line displays Divider(height: 1,color: blue) Color.grey,), Text(" fontweight.lerp (fontweight.w100, fontweight.w900, 0.3)",style: TextStyle(fontSize: 25, FontWeight: 30) Fontweight.lerp (fontweight.w100, fontweight.w900, 0.3)),), Color.grey,), Text(" fontweight.lerp (fontweight.w100, fontweight.w900, 0.4)",style: TextStyle(fontSize: 25, FontWeight: Lerp (fontweight.w100, fontweight.w900, 0.4)),),// Line displays Divider(height: 1,color: blue) Color.grey,), Text(" fontweight.lerp (fontweight.w100, fontweight.w900, 0.5)",style: TextStyle(fontSize: 25, FontWeight: 30) Fontweight.lerp (fontweight.w100, fontweight.w900, 0.5)),), Color.grey,), Text(" fontweight.lerp (fontweight.w100, fontweight.w900, 0.6)",style: TextStyle(fontSize: 25, FontWeight: Fontweight.lerp (fontweight.w100, fontweight.w900, 0.6)),), Color.grey,), Text(" fontweight.lerp (fontweight.w100, fontweight.w900, 0.7)",style: TextStyle(fontSize: 25, FontWeight: 25) Fontweight.lerp (fontweight.w100, fontweight.w900, 0.7)),),// Line displays Divider(height: 1,color: blue) Color.grey,), Text(" fontweight.lerp (fontweight.w100, fontweight.w900, 0.8)",style: TextStyle(fontSize: 25, FontWeight: Lerp (fontweight.w100, fontweight.w900, 0.8)),),// Line displays Divider(height: 1,color: blue) Color.grey,), Text(" fontweight.lerp (fontweight.w100, fontweight.w900, 0.9)",style: TextStyle(fontSize: 25, FontWeight: 30) Lerp (fontweight.w100, fontweight.w900, 0.9)),),// linear displayCopy the code
FontStyle italic non-italic

Divider(height: 1,color: Colors.grey,), Text("aaaaaaaa",style: TextStyle(fontSize: 45,fontStyle: Italic),),// Divider(height: 1,color: color.grey,), Text(" BBBBBBBB ",style: TextStyle(fontSize: 45, fontStyle: fontStyle. Normal),), / / normalCopy the code
The spacing between letters or Chinese characters

Divider(height: 1,color: Colors.grey,), Text("bbbbbbbb",style: TextStyle(fontSize: 25,letterSpacing: 5),), Divider(height: 1,color: Colors.grey,), Text("bbbbbbbb",style: TextStyle(fontSize: 25,letterSpacing: 10),), Divider(height: 1,color: Colors.grey,), Text("bbbbbbbb",style: TextStyle(fontSize: 25,letterSpacing: Divider(height: 1,color: color.grey,), Text(" Android Flutter",style: TextStyle(fontSize: 25,letterSpacing: Divider(height: 1,color: color.grey,), Text(" Android Flutter",style: TextStyle(fontSize: 25,letterSpacing: 25),),Copy the code
The spacing between words is used to separate words. In English, words are separated by Spaces. Chinese has no Spaces and should not be used frequently

Divider(height: 1,color: Colors.grey,), Text("aabb cc dd",style: TextStyle(fontSize: 25,wordSpacing: 5),), Divider(height: 1,color: Colors.grey,), Text("aa bb cc dd",style: TextStyle(fontSize: 25,wordSpacing: Divider(height: 1,color: color.grey,), Divider(height: 1,color: color.grey,), Text(" I ",style: TextStyle(fontSize: 25,wordSpacing: Divider(height: 1,color: color.grey,), Text("aa bb they we ",style: TextStyle(fontSize: 25,wordSpacing: 20),), Divider(height: 1,color: color.grey,), Text(" I divide you dd",style: TextStyle(fontSize: 25,wordSpacing: 25),Copy the code
Height row height coefficient Actual row height =height * fontSize

Divider(height: 1,color: Colors.grey,), Text("aaaaaaa",style: TextStyle(fontSize: 25,height: 1),), Divider(height: 1,color: color.grey,), Text(" BBBBBBB ",style: TextStyle(fontSize: 25,height: 1.5),), Divider(height: 1,color: red) Colors.grey,), Text("ccccccc",style: TextStyle(fontSize: 25,height: 2),), Divider(height: 1,color: Grey,), Text(" DDDDDDD ",style: TextStyle(fontSize: 25,height: 2.5),), Divider(height: 1,color: blue) Colors.grey,), Text("eeeeeee",style: TextStyle(fontSize: 25,height: 3),),Copy the code
Foreground sets the brush used to draw the font
  • “Color” and “foreground color” can only be used in one way, but color is short for Paint()… color = color
Background Sets the brush used to draw the background
  • BackgroundColor and background can only exist one or the other. BackgroundColor is the short form of Paint. Setting backgroundColor means setting Paint().. color = bacrgroundColor

var paint = Paint() .. color = Colors.red .. strokeCap = StrokeCap.square .. strokeWidth = 12; Divider(height: 1,color: Colors.grey,), Text("aaaaaaaaa",style: TextStyle(fontSize: 35,foreground: paint),), Divider(height: 1,color: Colors.grey,), Text("bbbbbbbbb",style: TextStyle(fontSize: 35,background: paint),), Divider(height: 1,color: Colors.grey,), Text("ccccccccc",style: TextStyle(fontSize: 35,background: Paint, height: 1.5),),Copy the code
Shadows Text shadow effect
  • Offset Indicates the offset of the xy axis
  • BlurRadius Degree of blurRadius

            Divider(height: 1,color: Colors.grey,),
            Text("aaaaaaaaa",style: TextStyle(fontSize: 35,color: Colors.red,shadows: [Shadow(color: Colors.black,offset: Offset(1, 2))]),),
            Divider(height: 1,color: Colors.grey,),
            Text("aaaaaaaaa",style: TextStyle(fontSize: 35,color: Colors.red,shadows: [Shadow(color: Colors.black,offset: Offset(2, 3))]),),
            Divider(height: 1,color: Colors.grey,),
            Text("aaaaaaaaa",style: TextStyle(fontSize: 35,color: Colors.red,shadows: [Shadow(color: Colors.black,offset: Offset(4, 6))]),),
            Divider(height: 1,color: Colors.grey,),
            Text("aaaaaaaaa",style: TextStyle(fontSize: 35,color: Colors.red,shadows: [Shadow(color: Colors.black,offset: Offset(1, 2),blurRadius: 5 )]),),
            Divider(height: 1,color: Colors.grey,),
            Text("aaaaaaaaa",style: TextStyle(fontSize: 35,color: Colors.red,shadows: [Shadow(color: Colors.black,offset: Offset(2, 3),blurRadius: 10 )]),),
            Divider(height: 1,color: Colors.grey,),
            Text("aaaaaaaaa",style: TextStyle(fontSize: 35,color: Colors.red,shadows: [Shadow(color: Colors.black,offset: Offset(5, 6),blurRadius: 15 )]),),
Copy the code
Insert more than one line, underscore, underscore, etc., into a text at a time
  • TextDecoration overline on line
  • TextDecoration. LineThrough strikethrough
  • TextDecoration. Underline the underline
DecorationColor The strikeout, dash, and underline color added to text
DecorationStyle The style used to add strikers, hyphens, underscores, dashed, solid, dotted, sinusoids, etc to text
  • TextDecorationStyle. Dashed dash
  • TextDecorationStyle. The dotted line
  • TextDecorationStyle. Double double
  • TextDecorationStyle. Solid lines
  • TextDecorationStyle. Wavy wavy lines

            Divider(height: 1,color: Colors.grey,),
            Text("aaaaaaaaa",style: TextStyle(fontSize: 35,),),
            Divider(height: 1,color: Colors.grey,),
            Text("bbbbbbbbb",style: TextStyle(fontSize: 35,decoration: TextDecoration.overline),),
            Divider(height: 1,color: Colors.grey,),
            Text("ccccccccc",style: TextStyle(fontSize: 35,decoration: TextDecoration.lineThrough),),
            Divider(height: 1,color: Colors.grey,),
            Text("ddddddddd",style: TextStyle(fontSize: 35,decoration: TextDecoration.underline),),
            Divider(height: 1,color: Colors.grey,),
            Text("eeeeeeeee",style: TextStyle(fontSize: 35,decoration: TextDecoration.combine([TextDecoration.overline,TextDecoration.lineThrough])),),
            Divider(height: 1,color: Colors.grey,),
            Text("fffffffff",style: TextStyle(fontSize: 35,decoration: TextDecoration.overline,decorationColor: Colors.red),),
            Divider(height: 1,color: Colors.grey,),
            Text("ggggggggg",style: TextStyle(fontSize: 35,decoration: TextDecoration.lineThrough,decorationStyle: TextDecorationStyle.dashed),),
            Divider(height: 1,color: Colors.grey,),
            Text("hhhhhhhhh",style: TextStyle(fontSize: 35,decoration: TextDecoration.lineThrough,decorationStyle: TextDecorationStyle.dotted,decorationColor: Colors.orange),),
            Divider(height: 1,color: Colors.grey,),
            Text("iiiiiiiii",style: TextStyle(fontSize: 35,decoration: TextDecoration.lineThrough,decorationStyle: TextDecorationStyle.double,decorationColor: Colors.red),),
            Divider(height: 1,color: Colors.grey,),
            Text("jjjjjjjjj",style: TextStyle(fontSize: 35,decoration: TextDecoration.lineThrough,decorationStyle: TextDecorationStyle.solid),),
            Divider(height: 1,color: Colors.grey,),
            Text("kkkkkkkkk",style: TextStyle(fontSize: 35,decoration: TextDecoration.lineThrough,decorationStyle: TextDecorationStyle.wavy),),
Copy the code

Text. Rich, partial editing of Text

Text.rich(this.textspan, // textSpan) Style, this.textalign, this.textDirection, this.locale, this.softwrap, this.overflow, this.textScaleFactor, this.maxLines, this.semanticsLabel, } )Copy the code

TextSpan

Const TextSpan({this.style,// text style, TextStyle this.text,// Text content this.children,//List<TextSpan> Can be added with multiple pieces of text this.recognizer,// screen click recognition});Copy the code

Function:

  • Make style changes to each paragraph
  • Add click listener separately for each paragraph of text

The code is as follows:

Text. Rich (TextSpan(Text: "XXXXXXXXX ",// display a paragraph of Text children: [// add another paragraph of Text TextSpan(Text: "aaaaaaaaaaaaaaaaa", style: TextStyle(fontSize: 15, color: color.red),// Change the current text color and size recognizer: OnTap = () {print("aaa");}), TextSpan(// No listener text: "BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB ", style: TextStyle(fontSize: 20, color: color.green)),// Change the color and size of the current text TextSpan(// no listening event text: FontSize: 25, color: color.blue),// Change the color and size of the current text. 30, color: color.orange),// Recognizer: TapGestureRecognizer()// Recognizer to XXXXXXX with click listening.. onTap = () { print("onTap"); }.. onTapCancel = () { print("onTapCancel"); }.. onTapUp = (TapUpDetails detail) { print("onTapUp"); }.. onTapDown = (TapDownDetails detail) { print("onTapDown"); }))Copy the code

The aaaa… Aaa added listening, so click and output “AAA” to XXXX… OnTap onTapDown onTapUp… bbb ccc.. CCC adds listening, so clicking both gets no output.