[Flutter] Text()

✍ Text Class

단일 스타일의 텍스트를 보여준다.

Text(
    String this.data, {
    super.key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
    this.textHeightBehavior,
    this.selectionColor,
  })

 

 

※ 인자값

 

1. 글자 데이터(String this.data)

보여줄 텍스트를 지정한다.

 

 

2. 글자 스타일(TextStyle this.style)

텍스트의 스타일을 결정한다. 

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

TextStyle() 의 인자들을 보면 한눈에 봐도 유추할 수 있는 인자들이 있다.

• Color?  color : 글자 색상 (ex. Colors.red)
• Color?  backgroundColor : 글자 배경 색상 (ex. Colors.green) - 이 속성을 사용하려면 background 는 null 로 한다.
• Paint?  background : 글자 배경 - 이 속성을 사용하려면 backgroundColor 는 null 로 한다.
• double?  fontSize : 글자 크기 (logical pixels)

Text("데이터 데이터다", style: TextStyle(
  color: Colors.pink,
  backgroundColor: Colors.green,
  fontSize: 40.0
  ),
);

나머지 인자들에 대한 설명은 다음과 같다.

 

 

2-1. font 관련 인자 (fontFamilly, fontWeight, fontStyle, fontFamilyFallback, fontFeatures, fontVariations)

 

2-1-1. fontFamilly, fontWeight : 외부 폰트 사용하기

[Flutter] asset 추가하기 / font 사용하기

 

2-1-2. List<String>? fontFamilyFallback : fontFamily 에서 존재하지 않은 폰트일 경우 대신 사용할 폰트를 설정한다.

Text("데이터 데이터", style: TextStyle(
    fontFamily: 'parienence',
    fontFamilyFallback: ['Noto Sans CJK SC', 'Noto Color Emoji',],
  ),
);

+ font 적용 순서

• fontFamily
• fontFamilyFallback
• 각 플랫폼(IOS, AOS)별에서 지원해주는 font

 

2-1-3. FontStyle? fontStyle : 기울어지게 할건지 아닌지 설정할 수 있다.

• FontStyle.noraml : 기울어짐 설정하지 않음
• FontStyle.ltalic : 기울어짐 설정

Text("데이터 데이터", style: TextStyle(fontStyle: FontStyle.italic));

 

2-1-4. fontFeatures, fontVariations

 

 

2-2. Paint? foreground

텍스트에 여러가지 효과를 줄 수 있다.

 

[그라데이션 효과]

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

 

[stroke and border]

Stack(
  children: <Widget>[
    // Stroked text as border.
    Text(
      'Greetings, planet!',
      style: TextStyle(
        fontSize: 40,
        foreground: Paint()
          ..style = PaintingStyle.stroke
          ..strokeWidth = 6
          ..color = Colors.blue[700]!,
      ),
    ),
    // Solid text as fill.
    Text(
      'Greetings, planet!',
      style: TextStyle(
        fontSize: 40,
        color: Colors.grey[300],
      ),
    ),
  ],
)

 

 

2-3. 글자 사이 간격 (letterSpacing, wordSpacing)

형식	속성	설명
double	letterSpacing	각 문자 사이의 간격으로 음의 값으로 갈수록 문자 사이를 더 가깝게 할 수 있다.
double	wordSpacing	각 단어 사이의 간격으로 음의 값으로 갈수록 단어 사이를 더 가깝게 할 수 있다.

 

 

2-4. 글자 그림자(List<Shadow>? shadow)

텍스트의 그림자를 설정한다.

Text("200mmgh", style: TextStyle(
  color: Colors.pink,
  backgroundColor: Colors.green,
  fontSize: 30.0,
  height: 3,
  shadows: [Shadow(color: Colors.black, offset: Offset.zero, blurRadius: 5.0)]
),);

 

 

2-5. 글자 높이(double height)

텍스트 높이를 설정한다. 좀 더 섬세한 설정을 하려면 Text() 의 strutStyle 속성을 이용한다.

Text("200mmgh", style: TextStyle(height: 3),);

다음 설정은 Roboto 폰트의 fontSize = 50 이었을 때 height 별 어떻게 보여지는지에 대한 그림이다. 

 

 

2-6. 글자 꾸미기 (decoration, decorationColor, decorationStyle, decorationThickness)

 

※ decoration

[overline]

Text(
  "200mmgh",
  style: TextStyle(
    color: Colors.pink,
    fontSize: 30.0,
    decoration: TextDecoration.overline,
    decorationColor: Colors.black,
    decorationThickness: 3.0),
),

 

 

[underline]

Text(
  "200mmgh",
  style: TextStyle(
    color: Colors.pink,
    fontSize: 30.0,
    decoration: TextDecoration.underline,
    decorationColor: Colors.blue,
    decorationThickness: 2.0),
),

 

 

[lineThrough]

Text(
  "100fdsdf",
  style: TextStyle(
    color: Colors.pink,
    fontSize: 30.0,
    decoration: TextDecoration.lineThrough,
    decorationColor: Colors.black,
    decorationThickness: 1.0),
),

 

※ decorationStyle

Text(
  "200mmgh",
  style: TextStyle(
    color: Colors.pink,
    fontSize: 30.0,
    decoration: TextDecoration.underline,
    decorationColor: Colors.blue,
    decorationStyle: TextDecorationStyle.dotted,
    decorationThickness: 2.0),
),

 

 

3. 글자 라인 수 제한(maxLines, overflow)

maxLines 로 글자 라인 수(int)를 제한할 수 있고 넘치는 글자에 대한 제어는 overflow 로 정한다.

TextOverflow	속성 설명
visible	넘치는 텍스트를 외부로 랜더링한다.
clip	넘치는 텍스트를 자른다.
fade	넘치는 텍스트를 투명하게 fade 한다.
ellipsis	넘치는 텍스트를 줄임표(...)를 사용하여 나타낸다.

Text(
  "A TextOverflow can be passed to Text and RichText via their Text.overflow and RichText.overflow properties respectively.",
  style: TextStyle(
    color: Colors.pink,
    fontSize: 15.0
  ),
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
),

 

 

4. 글자 정렬(textalign, textDirection)

 

4-1. TextDirection? textDirection

언어 중 오른쪽에서 왼쪽으로 읽는 언어도 있고 왼쪽에서 오른쪽으로 읽는 언어도 있기 때문에 어디서부터 읽는지 설정할 수 있다.

• TextDirection.rtl : 오른쪽에서 왼쪽
• TextDirection.ltr : 왼쪽에서 오른쪽

 

4-2. TextAlign? textalign

텍스트 정렬을 설정한다.

TextAlign	속성 설명
right	오른쪽 정렬
left	왼쪽 정렬
center	가운데 정렬
justify	너비에 채우도록 텍스트를 늘린다.
start	textDirection: rtl 일 경우는 왼쪽 정렬 (= left) textDirection: ltr 일 경우는 오른쪽 정렬(= right)
end	textDirection: rtl 일 경우는 오른쪽정렬(= right) textDirection: ltr 일 경우는 왼쪽 정렬(= left)

Text(
  "A TextOverflow can be passed to Text and RichText via their Text. A TextOverflow can be passed to Text and RichText via their Text.d RichText.",
  style: TextStyle(
    color: Colors.black,
    fontSize: 15.0
    ),
  textAlign: TextAlign.justify,
);

 

 

5. 부드러운 줄바꿈(bool softwrap)

화면을 벗어나는 길이의 텍스트일 때 자연스럽게 다음줄로 줄바꿈을 사용할지 안할지 설정한다. false 경우 가로로 무한 공간이 있는 것처럼 배치된다.

 

ex. 예시 글

A TextOverflow can be passed to Text and RichText via their Text.overflow and RichText.
overflow properties respectively.

Text(
  "A TextOverflow can be passed to Text and RichText via their Text.overflow and RichText.overflow properties respectively.",
  style: TextStyle(
    color: Colors.pink,
    fontSize: 15.0
  ),
  softWrap: true
),

 

 

6. 글자 높이(TextHeightBehavior textHeightBehavior)

TextStyle.height 와 함께 글자의 높이를 결정한다.

TextHeightBehavior(
  applyHeightToFirstAscent: true,
  applyHeightToLastDescent: true
)

applyHeightToFirstAscent 가 false 이면 텍스트 맨 위에서 Font Ascent 까지 높이 적용이 안된다. 마찬가지로 applyHeightToLastDescent 가 false 이면 Font Descent 에서 맨 아래까지 높이 적용이 안된다. 높이 적용이 안된다는 의미는 Text() 위젯으로써 Text Height 만큼 차지하지만 다른 위젯들의 입장에선 적용이 안된것으로 보인다.

 

예를 들어,

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    // Container A
    Container(
      color: Colors.black,
      height: 70.0,
      width: 300.0,
    ),
    // Container B
    Container(
      padding: const EdgeInsets.fromLTRB(10.0, 0, 10.0, 0),
      color: Colors.blue,
      // Text()
      child: const Text(
        "A TextOverflow can be passed",
        textHeightBehavior: TextHeightBehavior(
          applyHeightToFirstAscent: false,
          applyHeightToLastDescent: false),
        style: TextStyle(
          color: Colors.black,
          fontSize: 15.0,
          backgroundColor: Colors.amber,
          leadingDistribution: TextLeadingDistribution.proportional,
          height: 7.0),
        ),
      )
    ],
)

원래라면 applyHeightToFirstAscent 가 true 이고 applyHeightToLastDescent 가 true 일때처럼 Text() 높이가 전부 반영되어 그 높이를 Container B 가 감싼 보습을 볼 수 있다. 하지만 applyHeightToFirstAscent 와 applyHeightToLastDescent 가 false 이면 Container B는 Text()의  Font Ascent ~ Font Descent 까지 높이로 본다. 따라서 Container A 와 Container B 를 넘어서 위젯이 그려지는 모습을 볼 수 있다.

 

 

 

7. 글자 크기(TextStyle.fontSize + textScaleFactor)

TextStyle 의 fontSize 로 설정된 폰트 픽셀의 논리적 크기를 textScaleFactor 값으로 설정할 수 있다.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    const Text(
      "A Text Overflow",
      style: TextStyle(fontSize: 15.0, backgroundColor: Colors.amber),
    ),
    Container(height: 20.0,),
    const Text(
      "A Text Overflow",
      textScaleFactor: 2.0,
      style: TextStyle(fontSize: 15.0, backgroundColor: Colors.amber),
    ),
    Container(height: 20.0,),
    const Text(
      "A Text Overflow",
      textScaleFactor: 2.0,
      style: TextStyle(fontSize: 15.0, backgroundColor: Colors.amber),
    ),
  ]
);