---
description: >-
  This time I will tell you more about the Text.It fits from beginners to
  experts.
---

# Widgets 02 | Text

## What is the Text?&#x20;

This problem is very fooling but needs to know, The text show our string and it also is a widget in the flutter, we can use it as a common widget, so be careful about their parameters.

| Facebook Page                                           | Twitter                                   | GitHub                               | ​ |
| ------------------------------------------------------- | ----------------------------------------- | ------------------------------------ | - |
| ​[Flutter Open](https://www.facebook.com/flutteropen) ​ | ​[NieBin](https://twitter.com/niebin_gg)​ | ​[NieBin](https://github.com/nb312)​ | ​ |

## Before start

In the widgets 01,  we create a page to show our container, also we create a page show our `Text`. The way of creating a page is the same as before, you do not care about this, you just focus on the `Text` widget now. We will put them all in the `children` as follows.

```dart
class TextPage extends StatefulWidget {
  @override
  _TextState createState() => _TextState();
}

class _TextState extends State<TextPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Text"),
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text("Hello World"),
          ],
        ),
      ),
    );
  }
}
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWCFbgS3D7ruTrJ1caf%2F-LWCMTzVTH-3kc0N9w3G%2Ftext-01.png?alt=media\&token=fdf6cda3-3498-4621-bab9-118f85729694)

Then, we can put our Text into the `children` to continue our tutorial.

## Constructor&#x20;

You must make a custom to look at the constructor of the widgets before using it.

```dart
 Text(this.data, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  })
```

The `this.data` is where we put the `String`, this is easy to understand, we do not talk about this. the `style` is most common to use. `this.locale` control its language,this time I don't plan to talk about it, I will write another article to explain it.  So let's talk about the parameters one by one.

## style

Let's look at its definition.

```dart
 final TextStyle style;
```

&#x20;It is a `TextStyle` class, look at its definition,so many important parameters are here,such as the `fontSize`, `color`, `height`.

```dart
TextStyle({
    this.inherit = true,
    this.color,
    this.fontSize,
    this.fontWeight,
    this.fontStyle,
    this.letterSpacing,
    this.wordSpacing,
    this.textBaseline,
    this.height,
    this.locale,
    this.foreground,
    this.background,
    this.shadows,
    this.decoration,
    this.decorationColor,
    this.decorationStyle,
    this.debugLabel,
    String fontFamily,
    String package,
  }
```

The function of these parameters is a definition with its name. The `color` parameter control the color of `Text`.The `fontSize` controls its font size. We just show an example for simple param.

```dart
 Text(
              "TextStyle with easy parameters",
              style: TextStyle(
                color: Colors.black,
                fontSize: 22.0,
                background: Paint()
                  ..color = Color(0xffc7e5b4)
                  ..style = PaintingStyle.fill,
              ),
            )
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWCFbgS3D7ruTrJ1caf%2F-LWCb_viYIL1DxnweOdX%2Ftext-02.png?alt=media\&token=ef305d56-f334-4ef8-8f54-12eda9e20391)

We just change the parameters，they will show as follows.

```dart
Text(
              "TextStyle with easy parameters",
              style: TextStyle(
                color: Colors.white,
                fontSize: 14.0,
                background: Paint()
                  ..color = Color(0xffF2A7B3)
                  ..style = PaintingStyle.fill,
              ),
            )
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWCFbgS3D7ruTrJ1caf%2F-LWCcz8UHoKXaxt43f_n%2Ftext-03.png?alt=media\&token=b31cbc3d-fe4c-4566-bd93-bf2dc1889ea0)

Above code, we can learn how to use `color` ,`fontSize` and `background`t,the background is a Paint that controls the color or other things, I don't want to expand this for more detail.

#### **1. foreground**

```dart
  final Paint foreground;
```

We can see that the `foreground` is also as the `background` above, so just use the `Paint`,the `..`is a special operator in the flutter.

```dart
var p= Paint()
..color = Color(0xffA8CBFD)
..style = PaintingStyle.fill);
```

Is same as below.

```dart
var p= Paint();
p.color = Color(0xffA8CBFD);
p.style = PaintingStyle.fill);
```

We just code as follows.

```dart
 Text(
              "TextStyle with foreground",
              style: TextStyle(
                  fontSize: 40,
                  foreground: Paint()
                    ..color = Color(0xffA8CBFD)
                    ..strokeWidth = 1
                    ..style = PaintingStyle.stroke),
            )
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWCdqiB4n2-T0a4mGhB%2F-LWChULiMlfF-6JZabbK%2Ftext-04.png?alt=media\&token=01f00ed1-ebff-476d-a91f-638fc1375814)

The paint draw the `Text` with the foreground, be careful that we can't use the color parameter with this, so you can only choose one parameter.

#### 2. fontWeight

```dart
  final FontWeight fontWeight;
```

You can see the definition, the class is `FontWeight`, you can use its constant with a fore definition. We will use the `FontWeight.w700` ,  it represents bold text. The other constants you can find in the class  `FontWeight`,remain to you.

```dart
Text(
              "TextStyle with fontWeight",
              style: TextStyle(
                fontSize: 20,
                color: RED,
                fontWeight: FontWeight.w700,
              ),
            )
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWCdqiB4n2-T0a4mGhB%2F-LWClOaB-bmpZUicmrAb%2Ftext-05.png?alt=media\&token=13111740-8aa7-42d3-aa47-3075e338fe72)

#### 3. fontStyle

We know the type is `FontStyle`, we use its only two constants.As follows, this example will show an italic text.&#x20;

```dart
 Text(
              "TextStyle with fontStyle",
              style: TextStyle(
                fontSize: 20,
                color: BLUE_LIGHT,
                fontStyle: FontStyle.italic,
              ),
            )
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWCdqiB4n2-T0a4mGhB%2F-LWCnDeWqSHwpUj459zZ%2Ftext-06.png?alt=media\&token=42d01f65-558f-46fc-a6b0-87d87a691433)

#### 4. letterSpacing

The parameter will control the distance between the letter inside a word. For example, the word `Hello`if set this param, the distance between `H,e,l,l,o`  will depend on this param.

```dart
  Text(
              "TextStyle with letterSpacing 4",
              style: TextStyle(
                fontSize: 16,
                color: Colors.black,
                background: Paint()..color = GREEN,
                letterSpacing: 4,
              ),
            ),
            SizedBox(
              height: 10,
            ),
            Text(
              "TextStyle with letterSpacing 20",
              style: TextStyle(
                fontSize: 16,
                color: Colors.black,
                background: Paint()..color = GREEN,
                letterSpacing: 10,
              ),
            )
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWCdqiB4n2-T0a4mGhB%2F-LWCq8S2-6EeDERVI3Jp%2Ftext-07.png?alt=media\&token=98b0ec95-6d8f-495d-b51d-19df132aec07)

#### 5. wordSpacing

The parameter controls the distance between the two words, I will set two different `wordSpacing` to compare.

```dart
Text(
              "TextStyle with wordSpacing 1",
              style: TextStyle(
                  fontSize: 16,
                  color: Colors.black,
                  background: Paint()..color = RED,
                  wordSpacing: 1),
            ),
            Text(
              "TextStyle with wordSpacing 20",
              style: TextStyle(
                  fontSize: 16,
                  color: Colors.black,
                  background: Paint()..color = RED,
                  wordSpacing: 20),
            )
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWFSMv1y6lZJYh6Xnaa%2F-LWFTL0LkVkXgs9c25kv%2Ftext-08.png?alt=media\&token=1757372e-dcff-44ca-bd5b-7605a9ace123)

#### 6. shadows

When we see the definition of the `shadows`, we can see this.

```dart
  final List<ui.Shadow> shadows;
```

The `Shadow` constructor is below.&#x20;

```dart
const Shadow({
    this.color = const Color(_kColorDefault),
    this.offset = Offset.zero,
    this.blurRadius = 0.0,
  }
```

The `offset` is the direction from the origin point of the widget, the `blurRadius` is the distance of the blurred space.

So let's see an example.

```dart
Text(
              "TextStyle with Shadow",
              style: TextStyle(fontSize: 30, color: BLUE_DEEP, shadows: [
                Shadow(color: RED, offset: Offset(1, 2), blurRadius: 2)
              ]),
            ),
            Text(
              "TextStyle with Shadow",
              style: TextStyle(fontSize: 30, color: RED, shadows: [
                Shadow(
                    color: Colors.black, offset: Offset(1, 4), blurRadius: 1),
                Shadow(color: BLUE_DEEP, offset: Offset(2, 1), blurRadius: 2)
              ]),
            ),
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWFZabE0UOoqTIb7sRa%2F-LWFcf6JuYyyRZXM7x6_%2Ftext-09.png?alt=media\&token=f2c17270-ae51-42b3-968a-e8de2f60101c)

#### 7. decoration

In this part, I will tell three params:`decoration, decorationColor, decorationStyle`. They draw the same line show in the Text, the `decoration` controls the location, `decorationColor` control the color, `decorationStyle` control the shape. The definition is below.

```dart
  final TextDecoration decoration;
  final Color decorationColor;
  final TextDecorationStyle decorationStyle;
```

Let's see an example.

```dart
Text(
              "TextStyle with decoration underline",
              style: TextStyle(
                  fontSize: 20,
                  background: Paint()..color = GREEN,
                  decoration: TextDecoration.underline,
                  decorationColor: Colors.red,
                  decorationStyle: TextDecorationStyle.wavy),
            ),
            Text(
              "TextStyle with decoration lineThrough",
              style: TextStyle(
                  fontSize: 20,
                  background: Paint()..color = BLUE_LIGHT,
                  decoration: TextDecoration.lineThrough,
                  decorationColor: Colors.black,
                  decorationStyle: TextDecorationStyle.double),
            ),
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWFZabE0UOoqTIb7sRa%2F-LWFgtVV56YuAnCB7TaW%2Ftext-10.png?alt=media\&token=17f79ea3-32bc-4082-81f2-562c74ee7b6b)

#### 8. fontFamily

This parameter changes the typeface for the font. It is a bit difficult, but be patient.

First, we should download a typeface file on the web and in our project, I put into the `assets/font`. You should know the folders are created by myself, you can do that too.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWFZabE0UOoqTIb7sRa%2F-LWFrLFMpaMII2AgFiyU%2Ftext-11.png?alt=media\&token=d6323822-a654-424b-ac1c-c53422d214cf)

Then, config the `pubspec.yaml` file in our project,as I note with the red rectangle and paste the config as well.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWFZabE0UOoqTIb7sRa%2F-LWFszwc-f-HPdRmtJOv%2Ftext-12.png?alt=media\&token=369e2cd0-9f13-4918-ab0f-b5a00da41a5d)

```yaml
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
    - assets/images/
    - assets/font/
  fonts:
    - family: manigu
      fonts:
        - asset: assets/font/ManigueStaile.ttf
```

Finally, we can use the font name `manigu`as we set above.

```dart
Text(
              "Flutter open: TextStyle with fontFamily",
              style: TextStyle(fontFamily: "manigu", fontSize: 40, color: RED),
            )
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWFZabE0UOoqTIb7sRa%2F-LWFu6Ku2nDpVKZ2Eh0k%2Ftext-13.png?alt=media\&token=b3ae12cb-f38c-400f-8f44-87a00c4e288f)

It is easy for use, if you want more detail about the typeface to use, you can [click this link](https://flutter.io/docs/cookbook/design/fonts#from-packages). So far, we finish the using of `TextStyle`, let's look at the other using.

## textAlign

This param controls the `Text` location in the parent widget, I will show you it in a `Container`. The `TextAlign` constants are below, I just use the `end` to show.

| 1     | 2       | 3     |
| ----- | ------- | ----- |
| left  | center  | right |
| start | justify | end   |

```dart
 Container(
              constraints: BoxConstraints.expand(height: 40),
              color: BLUE,
              child: Text(
                "TextAlign end",
                style: TextStyle(background: Paint()..color = RED),
                textAlign: TextAlign.end,
              ),
            )
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWGK_gP5stFIfeGrajR%2F-LWGLa_-ITUrnQvQtHKy%2Ftext-14.png?alt=media\&token=2aaa3579-7c52-4fcc-9287-5fe60eddd54f)

## textDirection

Normally, we draw the `Text` from left from right, but we can change it with the `textDirection` parameter.&#x20;

```dart
  Container(
              color: YELLOW,
              constraints: BoxConstraints.expand(height: 40, width: 160),
              child: Text(
                "textDirection draw from right to left",
                textDirection: TextDirection.rtl,
              ),
            )
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWGK_gP5stFIfeGrajR%2F-LWGSQCrE20Sw_O3dZJp%2Ftext-15.png?alt=media\&token=80aa2362-e2ff-4d10-9490-acbe1f7ba50f)

## softWrap

This param will control the whether or not the show all content when there is not enough space for the text to show. If true means that it will show the all content, otherwise not show.

```dart
Container(
              color: RED,
              constraints: BoxConstraints.expand(height: 40, width: 160),
              child: Text("softWrap true Text Text Text Text", softWrap: true),
            ),
Container(
              color: BLUE,
              constraints: BoxConstraints.expand(height: 40, width: 160),
              child: Text("softWrap false Text Text Text Text", softWrap: false),
            )
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWGK_gP5stFIfeGrajR%2F-LWGUYZ3COM1mgLTOBMe%2Ftext-16.png?alt=media\&token=bd8541e9-9938-49bb-a571-a4469b2a2401)

## overflow

When there is not enough place to show, how we hand the end part, the overflow is a choice to handle this, above we end just cover the other part, but we can end with three points like follows, you also can use `clip`,`fade`.&#x20;

```dart
 Container(
              color: YELLOW,
              constraints: BoxConstraints.expand(height: 40, width: 240),
              child: Text(
                "overflow TextOverflow.ellipsis: Text Text Text",
                softWrap: false,
                overflow: TextOverflow.ellipsis,
              ),
            ),
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWGK_gP5stFIfeGrajR%2F-LWGWdnweRV396V32MmE%2Ftext-17.png?alt=media\&token=8681a065-075b-4624-a196-c1b7f073f331)

## maxLines

Also, you can use the `maxLines` to limit the space, in above part we can see the Text show two lines when there is no space in the horizontal direction.

```dart
 Container(
              color: RED_LIGHT,
              constraints: BoxConstraints.expand(height: 40, width: 230),
              child: Text(
                "max lines = 1 content content content content content",
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            )
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWGK_gP5stFIfeGrajR%2F-LWGZ2WMc2k_2bKkXXQ6%2Ftext-18.png?alt=media\&token=504e1129-53f7-47e3-9c82-b127f50d5a2e)

## textScaleFactor

When we want to make the `Text` larger or more little, we can use the `fontSize` to change its size. But there is another choice to change its scale, the `textScaleFactor`. It depends on the `fontSize`, for example, when we set `fontSize=10 ,textScaleFactor =2`, the real scale of the `Text` will be equal to 20, means that the real-scale=  `fontSize*textScaleFactor` for the `Text`.

```dart
 Text(
              "textScaleFactor = 1 fontSize = 16 ",
              style: TextStyle(fontSize: 16, color: BLUE),
              textScaleFactor: 1,
            ),
            Text(
              "textScaleFactor = 1.5 fontSize = 20 ",
              style: TextStyle(fontSize: 16, color: RED),
              textScaleFactor: 1.2,
            ),
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWGK_gP5stFIfeGrajR%2F-LWGadcCEIqWIvk9sLI4%2Ftext-19.png?alt=media\&token=1dd17abe-e9d8-4a27-9d16-293ae5973c6a)

## Conclusion

Today we learn how to use the Text, the most common used param is the style, it mainly controls the Text itself, but some other parameters are controlled with its parent widget. But you needn't know all of them, it's just used with your requirement.

Thanks for your reading!

The end.

#### Whole code in [GitHub](https://github.com/FlutterOpen/flutter-widgets-examples),star to support. <a href="#whole-code-in-github-star-to-support" id="whole-code-in-github-star-to-support"></a>

| Facebook Page                                           | Twitter                                   | QQ Group  | GitHub                               | ​ |
| ------------------------------------------------------- | ----------------------------------------- | --------- | ------------------------------------ | - |
| ​[Flutter Open](https://www.facebook.com/flutteropen) ​ | ​[NieBin](https://twitter.com/niebin_gg)​ | 963828159 | ​[NieBin](https://github.com/nb312)​ | ​ |
