Flutter text component Text

In android, a page is usually loaded and displayed by an Activity or a Fragment, and a View or a layout file (layout.xml ) can be used as the root element of a page.

In Flutter, Widget can be understood as a replacement for activity fragement view viewgroup and so on. The Widget is used to prepare the displayed page View information, and finally the Element is rendered.

This article was first published on the WeChat public account (biglead), my big front-end career, and published in various technical forums simultaneously.

The role of Text in Flutter

to display text

1 Text control Text basic instructions

    //Construction method creation, only one style can be generated 
    var textWidget =  Text ( "Hello world" , 
      //The alignment of the text; you can choose left alignment, right alignment or centering. 
      textAlign : TextAlign . center , 
      // text direction 
      textDirection : TextDirection .ltr , //Whether automatic line wrapping false text does not consider the container size to be displayed on a single line; the screen part will be truncated by default softWrap
       
      : false , // Specify the maximum number of lines displayed by the text, by default, the text is automatically wrapped 
      maxLines : 1 , //If there is extra text, you can specify the truncation method through overflow. The default is to truncate directly. //TextOverflow.clip trims TextOverflow.fade to fade TextOverflow.ellipsis ellipsis 
      overflow 
       
      
      : TextOverflow . ellipsis , 
      // Represents the scaling factor of the text relative to the current font size, relative to the style attribute to set the text 
      textScaleFactor :  1.5 , 
      style :  TextStyle ( 
        // The color of the text 
        color : Colors . blue , 
        // This property and Text's textScaleFactor are used to control the font size 
        //fontSize can precisely specify the font size, while textScaleFactor can only be controlled by scaling. 
        fontSize :  18.0 , 
        //This property is used to specify the line height, but it is not an absolute value , but a factor, the specific line height is equal to fontSize*height 
        height :  1.2 , 
        fontFamily :  "Courier" , 
        background:  new  Paint ( ) 
          . . color = Colors . yellow , 
        //line color 
        decorationColor :  const  Color ( 0xffffffff ) , 
        //none no text decoration lineThrough strikethrough overline text above display line underline text below display line 
        decoration : TextDecoration . underline , 
        //Text decoration style dashed, dotted dotted line (short interval size distinction) double three lines solid two lines decorationStyle 
        : TextDecorationStyle .solid , // 
        Word spacing (negative values ​​can make words more compact) 
        wordSpacing : 0.0 , 
        // letter spacing (negative values ​​can make letters more compact) 
        letterSpacing :  0.0 , 
        // text style, italic and normal 
        fontStyle : FontStyle . italic , 
        // font weight bold and normal 
        fontWeight : FontWeight . w900 ,

      ) , 
    ) ;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44

2 Text control TextRich rich text display (multiple styles) property usage instructions

    var textRich = new Text.rich(
      new TextSpan(
        text: 'Hello world',
        style: new TextStyle(
          color: Colors.white,
          fontSize: 14.0,
          decoration: TextDecoration.none,
        ),
        children: <TextSpan>[
          new TextSpan(
            text :  'Splice 1' , 
          ) , 
          new  TextSpan ( 
            text :  'Splice 7' , 
            style :  new  TextStyle ( 
              color : Colors . green , 
            ) , 
            recognizer : new  TapGestureRecognizer ( ) . . onTap = ( ) { //Add a click event 
              print ( '1' ) ; 
            } , 
          ) ,
        ] , 
      ) , 
    ) ;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

[1] At present, the Flutter series of tutorials are published for free on the watermelon video, which is updated daily. Welcome to pay attention to receive reminders and click to view the tips

[2] This official account will publish a series of special articles for the first time, and paid video courses will be published in the official account for free. On your way to work or just before going to bed, this official account is a small choice for you to browse knowledge and dry goods. , Collection is not as good as action, at that moment, the official account will remind you that it is time to learn.