[Flutter] Text

들어가며

Text 위젯이란?

• Text 위젯은 화면에 텍스트를 표시하는데 사용되는 위젯
• 다양한 속성을 사용하여 텍스트의 스타일, 정렬, 줄 바꿈 등을 조정할 수 있다.

Text 위젯 속성

• data: 표시할 텍스트를 나타내는 문자열
• style: 텍스트의 스타일을 지정하는 TextStyle 객체
• textAlign: 텍스트의 정렬 방향을 지정
• textDirection: 텍스트의 방향을 지정(왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽).
• maxLines: 최대 줄 수를 설정. 텍스트가 지정된 줄 수를 초과하면 자동으로 줄이 줄어든다.
• overflow: 텍스트가 공간을 초과하는 경우의 처리 방법을 지정(기본적으로는 "ellipsis"로 설정되어 있어서 생략 부호가 표시.
• textScaleFactor: 텍스트의 크기를 조절하는 데 사용.

TextStyle 속성

• fontSize: 텍스트의 글꼴 크기를 지정
• fontWeight: 텍스트의 글꼴 굵기를 지정(예: normal, bold, 100, 200, ... 900).
• fontStyle: 텍스트의 글꼴 스타일을 지정(예: normal, italic).
• fontFamily: 텍스트의 글꼴을 지정
• color: 텍스트의 색상을 지정
• letterSpacing: 텍스트의 글자 사이의 간격을 조정
• wordSpacing: 단어 사이의 간격을 조정
• textBaseline: 텍스트의 기준선을 지정(예: alphabetic, ideographic).
• height: 텍스트의 줄 간격을 조정
• decoration: 텍스트에 적용할 장식을 지정(예: underline, line-through).
• decorationColor: 장식의 색상을 지정
• decorationStyle: 장식의 스타일을 지정(예: solid, double).
• decorationThickness: 장식의 두께를 지정
• shadows: 텍스트에 적용할 그림자를 지정

예제

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Widget Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Text Widget Example'),
        ),
        body: Text(
          'Hello, Flutter!',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic,
            color: Colors.white,
            backgroundColor: Colors.blue,
            letterSpacing: 5.0,
            wordSpacing: 10.0,
            decoration: TextDecoration.underline,
            decorationColor: Colors.red,
            decorationStyle: TextDecorationStyle.double,
            shadows: [
              Shadow(
                color: Colors.grey,
                blurRadius: 2,
                offset: Offset(1, 1),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

화면