How Web Developers Understand Flutter Layout

This series aims to help Web front-end developers better understand Flutter layout components by describing the corresponding syntax mappings and basic technical instructions.

Text components.

  • Set the alignment with TextAlign

  • Set overflow mode with TextOverflow(TextOverflow)

  • The style is set by TextStyle

  • Set the reading direction using TextDirection

1, alignment

1.1. Right Justify

Text(
  "The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.",
  textAlign: TextAlign.right
)
Copy the code
  • In the following example, we use indentation for HTML inline styles that I don’t recommend.

This may still be the case in future examples. If you read the following sections, unless otherwise noted, we assume that you already know that this is the only way you have to write it to make it easier for you to visualize it, and that we will not address this type of indentation separately.

Equivalent to:

<div
  style=
  "text-align: right;"
>
  The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.
</div>
Copy the code

* Note: If you use a Text Widget, but the Text is not large enough to fill a line, the Text is displayed in a line-level style, and the right-aligned effect is not applied because the width is not set.

2. Overflow processing

2.1. Cutting (single line)

Text(
  "The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.",
  maxLines: 1,
  overflow: TextOverflow.clip
)
Copy the code

Equivalent to:

<div
  style=
  " white-space: nowrap; overflow: hidden; text-overflow: clip; "
>
  The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.
</div>
Copy the code

2.2. Cutting (multiple lines)

Text(
  "The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.",
  maxLines: 2,
  overflow: TextOverflow.clip
)
Copy the code

Equivalent to:

<div
  style=
  " --lines: 2; - the line - height: 1.3 em. text-overflow: clip; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines); overflow: hidden; line-height: --line-height; max-height: calc(var(--lines) * var(--line-height)); "
>
  The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.
</div>
Copy the code

2.3 Ellipsis (single line)

Text(
  "The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.",
  maxLines: 1,
  overflow: TextOverflow.ellipsis
)
Copy the code

Equivalent to:

<div
  style=
  " white-space: nowrap; overflow: hidden; text-overflow: ellipsis; "
>The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.</div>
Copy the code

2.4 ellipsis (multiple lines)

Text(
  "The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.",
  maxLines: 2,
  overflow: TextOverflow.ellipsis
)
Copy the code

Equivalent to:

<div
  style=
  " --lines: 2; - the line - height: 1.3 em. text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines); overflow: hidden; line-height: --line-height; max-height: calc(var(--lines) * var(--line-height)); "
>
  The Text widget displays a string of text with single style. The string might break across multiple lines or might all be displayed on the same line depending on the layout constraints.
</div>
Copy the code

3, style,

Text(
  "Hello Flutter!", style: TextStyle(// color: color (0xFFFF6600), // fontSize: 20.0, // underline decoration: TextDecoration. Underline, / / decoration types: dotted decorationStyle: TextDecorationStyle. Dashed, / / decoration color decorationColor: Italic, // Shadows: [Shadow(Color: Color(0xFF0000FF), offset: Offset(1.0, 2.0)]))Copy the code

Equivalent to:

<div
  style=
  " color: #FF6600FF; font-size: 20px; text-decoration: underline; text-decoration-style: dashed; text-decoration-color: #0000FFFF; font-style: italic; text-shadow: 1px 1px 0 #0000FFFF; "
>
  Hello Flutter!
</div>
Copy the code

4, direction,

4.1. From right to left

Text(
  "Hello Flutter!",
  textDirection: TextDirection.rtl
)
Copy the code

Equivalent to:

<div
  style=
  "direction: rtl;"
>
  Hello Flutter!
</div>
Copy the code

reference

[1] Flutter technology based video tutorial fat P7 6 November 2018. The Text Widget using www.bilibili.com/video/av358…

[2] Flutter learning path – 02, 2019 Text controls Text Style property www.jianshu.com/p/23308cadc…