Just as we learned about the basic Android controls, Flutter provides us with some basic widgets that can be used right out of the box. Let’s start with the Text Widget, which is definitely a high frequency in development.

The Text Widget is used to display Text, which is inherited from the StatelessWidget and contains properties that control how the Text is displayed.

const Text(
    this.data, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
  }) 
Copy the code

Data —- Pass in the String displayed in the Text Widget, which must not be null.

Style —- TextStyle control, which is a TextStyle type.

StrutStyle —- Strut is a feature that allows setting minimum line heights. The effect is as if the beginning of each line of the paragraph contains a zero-width space.

TextAlign —- how to align text horizontally, with choice of left, right, center, etc.

TextDirection —- the direction of text, whether it is left to right or right to left (for example, In Arabic or Hebrew).

Locale —- Related to internationalization.

SoftWrap —- whether text should be broken at a newline.

Overflow —- How overflow text should be handled.

TextScaleFactor —- represents the scale factor of the text relative to the current fontSize, which is a shortcut to resize the font relative to fontSize, which goes to the style property of the text. . The default value of this attribute can be MediaQueryData textScaleFactor, if there is no MediaQuery, then the default value is 1.0.

MaxLines —- Maximum number of lines. By default, text is automatically folded. If this parameter is specified, the text will not exceed the specified number of lines.

SemanticsLabel —- Semantic label, if present, the Widget’s semantics will contain this value instead of the actual text. This will override any semantic tags directly applied to [TextSpan].

TextWidthBasis —- Different ways to consider the width of one or more lines of text.

enum TextWidthBasis {
  /// Multiple lines of text will occupy the full width given by the parent. For a single line of text, only the minimum width required to contain the text will be used.
  parent,

  /// The width will be large enough to accommodate the longest rows
  longestLine,
}
Copy the code

Here is a simple Text example to see how Text can be used. We set the TextStyle to colors. red and textScaleFactor = 2.0 to double the font size.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); }}class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Home Page"),
        ),
        body: Wrap(
          children: <Widget>[
            Text(
              "Text1 I'm a test, what difference does it make with a paragraph test? \nText1 I am a test, what difference does adding paragraph tests make?",
              style: TextStyle(color: Colors.red),
              textScaleFactor: 2.0,),)); }}Copy the code

A, TextStyle

The above example is a simple usage, we do not control many fields, the following focus on learning TextStyle can change the style of Text.

const TextStyle({
    this.inherit = true.this.color,
    this.backgroundColor,
    this.fontSize,
    this.fontWeight,
    this.fontStyle,
    this.letterSpacing,
    this.wordSpacing,
    this.textBaseline,
    this.height,
    this.locale,
    this.foreground,
    this.background,
    this.shadows,
    this.fontFeatures,
    this.decoration,
    this.decorationColor,
    this.decorationStyle,
    this.decorationThickness,
    this.debugLabel,
    String fontFamily,
    List<String> fontFamilyFallback,
    String package,
  })
Copy the code

Inherit —- whether to overwrite the current null value with the TextStyle in the parent Widget, the following is the build function in the Text source code.

  @override
  Widget build(BuildContext context) {
    final DefaultTextStyle defaultTextStyle = DefaultTextStyle.of(context);
    TextStyle effectiveTextStyle = style;
    if (style == null|| style.inherit) effectiveTextStyle = defaultTextStyle.style.merge(style); . }Copy the code

Color —- Font color

BackgroundColor —- backgroundColor

FontSize —- fontSize

FontWeight —- Font thickness to use when drawing text, Bold, Medium, etc

FontStyle —- fontStyle, the font variation to use when drawing letters (such as italics).

/// Whether to tilt the glyph in a font
enum FontStyle {
  /// Use an upright font
  normal,
  /// Use logos designed specifically for tilting
  italic,
}
Copy the code

LetterSpacing —- The amount of space (in logical pixels) to be added between each letter. Negative values can be used to make the letters closer together.

WordSpacing —- The amount of space (in logical pixels) to add to each sequence of blanks (that is, between each word). Negative values can be used to make words closer together.

TextBaseline —- is used to align the horizontal line of text.

Height —- This property is used to specify the row height, but it is not an absolute value, but a factor. The row height is equal to fontSize * height.

Locale —- Related to internationalization

Foreground —- foreground Paint

Background —- Paint

Shadows —- the list of [shadows] that will be drawn below the text.

FontFeatures —- affects the FontFeature list of font selection glyphs.

Decoration —- Decoration (e.g. underline) drawn near text.

DecorationColor —- Draws the color of the decoration

DecorationStyle —- draws the style of the decoration

enum TextDecorationStyle {
  /// Draw a solid line
  solid,
  /// Draw two lines
  double./// Draw a dot and a line
  dotted,
  /// Draw a short horizontal line dotted line
  dashed,
  /// Draw a wavy line
  wavy
}
Copy the code

DecorationThickness —- The decorative stroke thickness factor multiplied by the font definition to get the final decorative stroke thickness.

DebugLabel —- a readable description of this text style

FontFamily —- Because different platforms support different font sets by default, be sure to test them on different platforms before manually specifying fonts.

FontFamilyFallback —- can provide a custom list of [fontFamilyFallback]. The list should be an ordered list of strings of font family names, in order of attempt. Fonts in [fontFamilyFallback] are used only if the requested glyph does not exist in [fontFamily].

Package —- specifies the package name. To use the fonts defined in package, you must provide the package argument.

Now let’s try as many property controls as possible to see how the characters appear.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Home Page"),
        ),
        body: Wrap(
          children: <Widget>[
            Text(
              "Text1 I'm a test, what difference does it make with a paragraph test? \nText1 I am a test, what difference does adding paragraph tests make?",
              style: TextStyle(
                  color: Colors.red,
                  backgroundColor: Colors.blue,
                  fontSize: 18.0,
                  fontWeight: FontWeight.bold,
                  fontStyle: FontStyle.italic,
                  letterSpacing: - 1,
                  wordSpacing: 10.0,
                  height: 1.2,
                  decoration:TextDecoration.underline,
                  decorationStyle: TextDecorationStyle.wavy,
                  decorationThickness: 3.0),
              textScaleFactor: 2.0,),)); }}Copy the code

Next, try drawing a text shadow.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Home Page"),
        ),
        body: Wrap(
          children: <Widget>[
            Text(
              "Text1 I'm a test, what difference does it make with a paragraph test? \nText1 I am a test, what difference does adding paragraph tests make?",
              style: TextStyle(
                color: Colors.red,
                fontSize: 24.0,
                fontWeight: FontWeight.normal,
                fontStyle: FontStyle.normal,
                letterSpacing: 2,
                wordSpacing: 10.0,
                height: 1.2,
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.solid,
                shadows: <Shadow>[
                  Shadow(color: Colors.grey, offset: Offset(4.6() [() [() [() [() }}Copy the code

Second, custom fonts

2.1 Declared in pubspec.yaml

Next, we created assets folder under the project root directory, and created fonts folder inside it. Next, I copied a copy of Yegenu Blade Blackgrass font (which is the font I installed before) from Windows font, and added it to pubspec.yaml file declaration. After a long time, the font did not load. I downloaded a Caladea font, updated the pubspec.yaml file, recompiled the program, and it was fine. Then the ye genyou blade black grass font use a, found or. I think it was because the compilation system was out of order, because I unpacked the app and didn’t find my previous font files. Here is the configuration file.

fonts:
    - family: Caladea
      fonts:
        - asset: assets/fonts/Caladea-Regular.ttf
        - asset: assets/fonts/Caladea-Italic.ttf
          style: italic

    - family: yegenyoudaofengheicao1
      fonts:
        - asset: assets/fonts/yegenyoudaofengheicao1.ttf
Copy the code

Style: italic specifies the specific TTF font to use in italic

2.2 the use of

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Home Page"),
        ),
        body: Wrap(
          children: <Widget>[
            Text(
              "Text1 english word go cat dog hello world. This is Chinese.",
              style: TextStyle(
                color: Colors.red,
                fontSize: 24.0,
                fontWeight: FontWeight.normal,
                fontStyle: FontStyle.normal,
                letterSpacing: 2,
                wordSpacing: 10.0,
                height: 1.2,
                fontFamily: 'yegenyoudaofengheicao1',
              ),
            ),
            Text(
              "Text1 english word go cat dog hello world. This is Chinese.",
              style: TextStyle(
                color: Colors.red,
                fontSize: 24.0,
                fontWeight: FontWeight.normal,
                fontStyle: FontStyle.italic,
                letterSpacing: 2,
                wordSpacing: 10.0,
                height: 1.2,
                fontFamily: 'Caladea',
              ),
            ),
            Text(
              "Text1 english word go cat dog hello world. This is Chinese.",
              style: TextStyle(
                color: Colors.red,
                fontSize: 24.0,
                fontWeight: FontWeight.normal,
                fontStyle: FontStyle.normal,
                letterSpacing: 2,
                wordSpacing: 10.0,
                height: 1.2(), () [(). }}Copy the code

Third, TextSpan

If we need to display different parts of a Text content in different styles, we can use TextSpan, which represents a “fragment” of the Text. This is similar to SpannableString in Android development.

const TextSpan({
    this.text,
    this.children,
    TextStyle style,
    this.recognizer,
    this.semanticsLabel,
  })
Copy the code

Pretty much all of these attributes have been seen before, with the exception of recognizer.

Recognizer —- GestureRecognizer class, associated with gesture recognition, such as recognizing clicks.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Home Page"),
        ),
        body: Wrap(
          children: <Widget>[
            Text.rich(
              TextSpan(children: [
                TextSpan(text: "Get more:"),
                TextSpan(
                  text: "https://blog.csdn.net/tyyj90",
                  style: TextStyle(
                      color: Colors.blue,
                      decorationColor: Colors.blue,
                      decorationStyle: TextDecorationStyle.solid,
                      decoration: TextDecoration.underline),
                ),
              ]),
              textScaleFactor: 1.5,),)); }}Copy the code

Four, StrutStyle

const StrutStyle({
    String fontFamily,
    List<String> fontFamilyFallback,
    this.fontSize,
    this.height,
    this.leading,
    this.fontWeight,
    this.fontStyle,
    this.forceStrutHeight,
    this.debugLabel,
    String package,
  }) 
Copy the code

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Home Page"),
        ),
        body: Wrap(
          children: <Widget>[
            Text.rich(
              TextSpan(
                text: '--------- ---------\n',
                style: TextStyle(
                  fontSize: 14,
                  fontFamily: 'Roboto',
                ),
                children: <TextSpan>[
                  TextSpan(
                    text: '^^^M^^^\n',
                    style: TextStyle(
                      fontSize: 30,
                      fontFamily: 'Roboto',
                    ),
                  ),
                  TextSpan(
                    text: 'M------M\n',
                    style: TextStyle(
                      fontSize: 30,
                      fontFamily: 'Roboto',
                    ),
                  ),
                ],
              ),
              strutStyle: StrutStyle(
                fontFamily: 'Roboto',
                fontSize: 14,
                height: 1,
                forceStrutHeight: true(), () [(). }}Copy the code

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Home Page"),
        ),
        body: Wrap(
          children: <Widget>[
            Text.rich(
              TextSpan(
                text: ' he candle flickered\n',
                style: TextStyle(fontSize: 14, fontFamily: 'Serif'),
                children: <TextSpan>[
                  TextSpan(
                    text: 'T',
                    style: TextStyle(fontSize: 37, fontFamily: 'Serif'),
                  ),
                  TextSpan(
                    text: 'in the moonlight as\n',
                    style: TextStyle(fontSize: 14, fontFamily: 'Serif'),
                  ),
                  TextSpan(
                    text: 'Dash the bird fluttered\n',
                    style: TextStyle(fontSize: 14, fontFamily: 'Serif'),
                  ),
                  TextSpan(
                    text: 'off into the distance.',
                    style: TextStyle(fontSize: 14, fontFamily: 'Serif'),
                  ),
                ],
              ),
              strutStyle: StrutStyle(
                fontFamily: 'Serif',
                fontSize: 14,
                forceStrutHeight: true() [[(); [(). }}Copy the code

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Home Page"),
        ),
        body: Wrap(
          children: <Widget>[
            Text.rich(
              TextSpan(
                text: 'the candle flickered\n',
                style: TextStyle(fontSize: 14, fontFamily: 'Serif'),
                children: <TextSpan>[
                  TextSpan(
                    text: 'in the moonlight as\n',
                    style: TextStyle(fontSize: 14, fontFamily: 'Serif'),
                  ),
                  TextSpan(
                    text: 'Dash the bird fluttered\n',
                    style: TextStyle(fontSize: 14, fontFamily: 'Serif'),
                  ),
                  TextSpan(
                    text: 'off into the distance.',
                    style: TextStyle(fontSize: 14, fontFamily: 'Serif'),
                  ),
                ],
              ),
              strutStyle: StrutStyle(
                fontFamily: 'Serif',
                fontSize: 14,
                forceStrutHeight: true,
                leading: 1.0),),])); }}Copy the code

Fifth, softWrap

Whether text should be broken at a newline. Change the bool softWrap value to not break line breaking when softWrap is false. The default is true.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Home Page"),
        ),
        body: Wrap(
          children: <Widget>[
            Text(
              "Text1 I'm a test, what difference does it make with a paragraph test? \nText1 I am a test, what difference does adding paragraph tests make?",
              style: TextStyle(color: Colors.red),
              textScaleFactor: 2.0,
              softWrap: false,),)); }}Copy the code

Six, overflow

enum TextOverflow {
  /// tailoring
  clip,
  /// Fade the spilled text into transparency.
  fade,
  /// Use an ellipsis to indicate that the text has spilled out.
  ellipsis,
  /// Renders the spilled text outside its container.
  visible,
}
Copy the code

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Home Page"),
        ),
        body: Wrap(
          children: <Widget>[
            ConstrainedBox(
              constraints: BoxConstraints(maxWidth: 300, maxHeight: 100),
              child: Text(
                "Text1 I'm a test, what difference does it make with a paragraph test? \nText1 I am a test, what difference does adding paragraph tests make?",
                style: TextStyle(color: Colors.red),
                textScaleFactor: 2.0, overflow: TextOverflow.clip, ), ) ], )); }}Copy the code