Detailed explanation of the usage example of flutter text component

text

The implementation of flutter component refers to the design concept of react. All content on the interface is composed of components, and there is also a distinction between stateful components and stateless components. Here is a brief introduction to the most basic components.

In terms of the writing method of component code, the style of web development is mainly controlled by css, and client development is slightly different depending on the technology stack used: the writing method of ReactNative is similar to that of web, but ReactNative is used()Method creates style objects and writes inline.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const LotsOfStyles = () => {
    return (
      <View style={}>
        <Text style={}>just red</Text>
        <Text style={}>just bigBlue</Text>
        <Text style={[, ]}>bigBlue, then red</Text>
        <Text style={[, ]}>red, then bigBlue</Text>
      </View>
    );
};
const styles = ({
  container: {
    marginTop: 50,
  },
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});
export default LotsOfStyles;

flutter encapsulates components into objects, and styles and events are assigned values ​​when instantiated in the form of attributes.

Text( 'Hello, $_name! How are you?', 
    textAlign: , 
    overflow: , 
    style: const TextStyle(fontWeight: ),
    )

Text components

With our little finger, you can imagine that the Text component is mainly used to display a text string. This string may occupy one line of text according to the constraint space of the layout container, or may display multiple lines of text.

TextThe component's constructor has an optionalstyleAttribute, if we omit this attribute, the text will use the default style.

If we specify our customizedstyleStyle, the class object of this style isTextStyle. Our custom madestyleThe style will bemergeto the nearest default styleDefaultTextStyleGo up.

Default style classDefaultTextStyleThere are several attributes:

maxLine: Maximum number of rows, this property is optional.

overflow: The style after the text is exceeded. There are several optional values ​​for overflow: clip (cut), fade (hidden), ellipsis (omitted), and visible (directly displayed). If we click on the document and look at it, we will find that it is actually an enum typeEnum。

const TextOverflow = {
    clip,
    fade,
    ellipsis,
    visible
}

Main properties on Text component constructor

• style: text style.
• textAlign: Text alignment.
• textDirection: Text orientation.
• textHeightBehavior: Define how to display height in style
• selectionColor: The color when the text is selected.
• overflow: The style after the text is exceeded.
• maxLine: Maximum number of rows, this property is optional.

Think about it with your little finger, the alignment and text orientation are also an enum type. And style is aTextStyleTypes ofTextStyleFonts that can be defined:

• ThicknessfontWeight

    const Text( 'No, we need bold strokes. ', 
        style: TextStyle(fontWeight: ),
    )

• Italics

const Text( "Welcome to the present", 
    style: TextStyle(fontStyle: ), 
)

• Transparency and color

TextSpan( 
    text: "You don't have the votes.\n", 
    style: TextStyle(
        color: (0.6)), 
    ),

• Font size

Text( 
    "These are wise words, ", 
    style:(context).(fontSizeFactor: 2.0), 
)

• Go high

const Text( 
    'Ladies and gentlemen, ',
    style: TextStyle(height: 5, fontSize: 10),
   )

It should be noted that: the performance will followfontSize * nThe proportion of the expansion is performed.

Then we can also define the underscore, stroke, fill color, and even gradient color of the font.

• Underline

RichText( 
    text: const TextSpan( 
        text: "Don't tax the South ", 
        children: <TextSpan>[ 
        TextSpan( 
        text: 'cuz', 
        style: TextStyle( 
            color: , 
            decoration: ,
            decorationColor: ,                    decorationStyle:, 
            ),
         ), 
            TextSpan( 
            text: ' we got it made in the shade',             ), 
      ],
     ),
   )

• Stroke and fill colors

Stack( 
    children: <Widget>[
    Text( 'Greetings, planet!',
        style: TextStyle( 
            fontSize: 40, 
            foreground: Paint()
            ..style = 
            ..strokeWidth = 6
            ..color = [700]!,
            ),
        ),
    Text( 'Greetings, planet!',
        style: TextStyle( 
            fontSize: 40, 
            color: [300],
            ),
           ),
          ],
        )

• Color gradient

Text( 
    'Greetings, planet!', 
     style: TextStyle( 
         fontSize: 40, 
         foreground: Paint() 
         ..shader = ( 
             const Offset(0, 20), 
             const Offset(150, 20),
             <Color>[ 
             , 
             ,
             ],
            ) 
          ),
      )

To master the properties of the Text component as a whole, you need to carefully consider what styles it needs: which font is used, what color is set, how many row heights are needed, which alignment method is used, whether strokes and gradients are needed, and whether a decorative style (underscore, strikethrough) is needed to master it.

If the text has an interactive effect, you need to useGestureDetectorThis component wraps it up,GestureDetectorTriggered on componentontaps event.

If you master these contents, you can master flutter's text components.

The above is the detailed explanation of the flutter text component usage example. For more information about the use of flutter text component, please pay attention to my other related articles!