This article records the common opening of Text as a reminder.

  • The Demo at gitee.com
  • Official documentation api.flutter. Dev

The default

Text('Hello, Guangzhou');
Copy the code

Change the text color

Text('Red text', style: TextStyle(color: Colors.red))
Copy the code

Change the background color

Text('Pink background', style: TextStyle(backgroundColor: Colors.pink))
Copy the code

Change font size

Text('font size: 18', style: TextStyle(fontSize: 18))
Copy the code

bold

Text('bold',style: TextStyle(fontWeight: FontWeight.bold))
Copy the code

italics

Text('italics', style: TextStyle(fontStyle: FontStyle.italic))
Copy the code

The font

Text("Font", style: TextStyle(fontFamily: 'Courier'))
Copy the code

Newline behavior

Text('Newline or not, default is true, false will display only one line abcDEFghijKLKJLKJlKJlKJ',
    softWrap: false),

// add...
Text(
  'Overflow: TextOverflow. Ellipsis: Length displayed when exceeding the maximum width of a line... Length displays when the maximum line width is exceeded... Length displays when the maximum line width is exceeded... ,overflow: TextOverflow.ellipsis',
  softWrap: false,
  overflow: TextOverflow.ellipsis,
)

// Do not wrap and truncate the text
Text(
  'Overflow: TextOverflow. Clip: Length truncation exceeds the maximum width of a row,
  softWrap: false,
  overflow: TextOverflow.clip,
)

// No line breaks, there is a gradient hide at the end
Text(
  'Overflow: TextOverflow. Fade: Hidden fade occurs when the length of a row exceeds the maximum width of the row.',
  softWrap: false,
  overflow: TextOverflow.fade,
)

// Continue rendering after the screen is out, feeling no need to exist
Text(
  'Overflow: TextOverflow. Visible: Render overflowing text outside of its container',
  softWrap: false,
  overflow: TextOverflow.visible,
)
Copy the code

line

Text('Top line of text', style: TextStyle(decoration: TextDecoration.overline)),

Text('Middle line', style: TextStyle(decoration: TextDecoration.lineThrough)),

Text('Bottom line of text', style: TextStyle(decoration: TextDecoration.underline)),

Text('Top bottom line of text',
    style: TextStyle(
        decoration: TextDecoration.combine(
            [TextDecoration.overline, TextDecoration.underline]))),

Text('Double cross',
    style: TextStyle(
        decorationColor: Colors.blue, // Set the line color
        decorationStyle: TextDecorationStyle.double,
        decoration: TextDecoration.underline)),

Text('line',
    style: TextStyle(
        decorationColor: Colors.blue,
        decorationStyle: TextDecorationStyle.dashed,
        decoration: TextDecoration.underline)),

// The difference with dashed lines is that dashed lines are broken lines
Text('Connect the dots',
    style: TextStyle(
        decorationColor: Colors.blue,
        decorationStyle: TextDecorationStyle.dotted,
        decoration: TextDecoration.underline)),

// Default style
Text('lines',
    style: TextStyle(
        decorationColor: Colors.blue,
        decorationStyle: TextDecorationStyle.solid,
        decoration: TextDecoration.underline)),

Text('Wavy line',
    style: TextStyle(
        decorationColor: Colors.blue,
        decorationStyle: TextDecorationStyle.wavy,
        decoration: TextDecoration.underline)),

Text('The horizontal line is red',
    style: TextStyle(
        decorationColor: Colors.red,
        decorationStyle: TextDecorationStyle.wavy,
        decoration: TextDecoration.underline)),

Text('Set line thickness',
    style: TextStyle(
        decorationThickness: 4,
        decorationColor: Colors.red,
        decorationStyle: TextDecorationStyle.solid,
        decoration: TextDecoration.underline)),
Copy the code

Center, left, right, and side aligned

Text('Text left', textAlign: TextAlign.left),
Text('Text centered', textAlign: TextAlign.center),
Text('Text to the right', textAlign: TextAlign.right),
Text('Text aligned to the sides :', textAlign: TextAlign.justify),

// Use start and end with text orientation to display text such as Arabic text from right to left.
Text('TextDirection.ltr + TextAlign.start',
    textAlign: TextAlign.start, textDirection: TextDirection.ltr),
Text('TextDirection.rtl + TextAlign.start',
    textAlign: TextAlign.start, textDirection: TextDirection.rtl),
Text('TextDirection.ltr + TextAlign.end',
    textAlign: TextAlign.end, textDirection: TextDirection.ltr),
Text('TextDirection.rtl + TextAlign.end',
    textAlign: TextAlign.end, textDirection: TextDirection.rtl),
Copy the code

Line height

Text(Set row height in units: x Part 1 1111 22 Part 2 333 44 Part 3, style: TextStyle(height: 3))
Copy the code

Text stroke

import 'dart:ui' as ui;

Text("Stroke",
    style: TextStyle(
        fontSize: 30, foreground: Paint() .. style = PaintingStyle.stroke .. strokeWidth =1
          ..color = Colors.blue))
Copy the code

Text gradient

import 'dart:ui' as ui;

Text("Gradient: foreground: Paint().. shader = ui.Gradient.linear",
    style: TextStyle(
        fontSize: 30, foreground: Paint() .. shader = ui.Gradient.linear(const Offset(0.20),
              const Offset(150.20), [Colors.red, Colors.yellow]))),
Copy the code

shadow

Text("Add shadow to text",
    style: TextStyle(shadows: [
      Shadow(
        offset: Offset(10.0.10.0),
        blurRadius: 3.0,
        color: Color.fromARGB(255.0.0.0),
      ),
      Shadow(
        offset: Offset(10.0.10.0),
        blurRadius: 8.0,
        color: Color.fromARGB(125.0.0.255)))),Copy the code

spacing

Text('Letter spacing', style: TextStyle(letterSpacing: 3)),
Text('Word spacing', style: TextStyle(wordSpacing: 35)),
Copy the code

Adjust text pixel magnification

Text('textScaleFactor: Font pixels = textScaleFactor * logical pixels.',
    textScaleFactor: 1.5)
Copy the code

Control the number of rows

Text('Up to three lines :\nline1\nline2\nline3\nline4', maxLines: 3),
Copy the code

The rich text

Text.rich(TextSpan(
    text: 'Hello',
    style: TextStyle(color: Colors.red),
    children: [
      TextSpan(
        text: 'wor',
        style: TextStyle(color: Colors.green),
      ),
      TextSpan(
        text: 'ld! ',
        style: TextStyle(color: Colors.blue),
      )
    ]))
Copy the code