Inscription
- Holding the sword in the world, starting from your accumulation, wherever you go, you must strive for perfection, that is, toss every day.

important news

• For those who are proficient, you can check it out here
• Flutter's UI basics video from getting started practice to developing an APP
• From entry to mastery of flutter series of articles

Describe TextStyle in one sentence, TextStyle is used to set the style of text in Text and TextFeild.

TextField series of articles

• The basic use of TextField and the common properties of TextField
• TextField focus acquisition control chapter "click to view details"
• TextField input text style TextStyle article "It's this article"
• TextField input text textAlign alignment analysis chapter "click to view details"
• TextField input text decoration configure border style and prompt text analysis "click to view details"
• TextField TextEditingController Analysis "Click to View Details"

1 Introduction

In flutter application development, TextField component is used to enter text and Text component is used to display text.

The decoration of the text input box TextField Set the
InputDecoration to configure different border styles and prompt text, etc., and set the TextStyle through the style attribute to configure the style of the input text.

The component Text used for text display also configures the style of the displayed text by setting the TextStyle style through the style attribute.

2 Common property configuration of TextStyle

  TextStyle buildCommonStyle ( )  { 
    return  TextStyle ( 
      textBaseline : TextBaseline . alphabetic , 
      /// Set the color of the text 
      color : Colors . deepPurple , 
      /// Set the size of the text 
      fontSize :  16.0 , 
      /// Use the line to set the Text 
      /// TextDecoration .none no 
      /// TextDecoration.underline underline 
      /// TextDecoration.overline overline
       /// TextDecoration.lineThrough strikethrough 
      decoration : TextDecoration .none , /// 
      Set the color of the underline
      decorationColor : Colors . green , 
      /// Set the style of underline 
      /// TextDecorationStyle.dashed set to dashed line 
      /// TextDecorationStyle.solid set to solid line 
      /// TextDecorationStyle.double two solid lines 
      /// TextDecorationStyle.wavy wavy line 
      decorationStyle : TextDecorationStyle . wavy , 
      /// Set the text to bold 
      /// FontWeight.bold bold 
      fontWeight : FontWeight . w600 , 
      /// Set italic 
      fontStyle : FontStyle . normal , 
      /// Used to set the distance between words 
      letterSpacing : 1.0 , 
      ///Used to set the distance between words 
      wordSpacing :  2.0 , 
      ///Control the line height multiple (multiple of the default line height) multiplied by fontSize as the line 
      height height :  1.2 , 
      ///The background color of the text 
      backgroundColor : Colors . grey , 
      ///Decoration background setting 
// shadows: 
    ) ; 
  }

• 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

3 TextStyle textBaseline property to configure the text baseline

The textBaseline property sets or returns the current text baseline when text is drawn.

The following illustration demonstrates the various baselines supported by the textBaseline property:

In flutter application development , TextStyle uses textBaseline to prepare the baseline, but TextStyle in flutter only supports alphabetic and ideographic. Generally, these two values ​​are only slightly moved for text alignment. The difference is (can be Observed from the above figure) alphabetic sets the text baseline to refer to English, while ideographic sets the text baseline to refer to Chinese.

The value of textBaseline in flutter is defined by the TextBaseline enumeration.

/// A horizontal line used for aligning text.
enum TextBaseline {
  /// The horizontal line used to align the bottom of glyphs for alphabetic characters.
  alphabetic,
  /// The horizontal line used to align ideographic characters.
  ideographic,
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

4 TextStyle fontWeight

The property sets the thickness of the text. In flutter application development, the value of fontWeight is defined in the FontWeight class