Flutter Text 위젯 정리 + 간단 예제

📌 1. Text 위젯이란?

✅ 개념

• 화면에 문자(텍스트)를 표시하는 가장 기본 위젯

👉 거의 모든 앱에서 사용됨 (제목, 내용, 버튼 등)

---

📌 2. 가장 기본 예제

Text("Hello Flutter")

👉 화면에 "Hello Flutter" 출력

---

📌 3. 스타일 적용 (TextStyle)

Text(
  "Hello Flutter",
  style: TextStyle(
    fontSize: 20,
    color: Colors.blue,
    fontWeight: FontWeight.bold,
  ),
)

---

📌 4. 주요 속성

속성	설명
fontSize	글자 크기
color	글자 색
fontWeight	굵기
fontStyle	italic 등
letterSpacing	글자 간격
height	줄 간격

---

📌 5. 정렬 (textAlign)

Text(
  "가운데 정렬 텍스트",
  textAlign: TextAlign.center,
)

---

📌 6. 길이 제한 (overflow)

Text(
  "엄청 긴 텍스트를 한 줄로 줄이고 싶을 때...",
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
)

👉 결과:
"엄청 긴 텍스트..." → "엄청 긴 텍..."

---

📌 7. 실전 예제 (UI 느낌)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: TextExample(),
    );
  }
}

class TextExample extends StatelessWidget {
  const TextExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Text Example")),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text(
              "상품 제목",
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 10),
            Text(
              "가격: 10,000원",
              style: TextStyle(
                color: Colors.grey,
              ),
            ),
            SizedBox(height: 10),
            Text(
              "이것은 상품 설명입니다. 길어지면 자동으로 줄바꿈이 됩니다.",
            ),
          ],
        ),
      ),
    );
  }
}

---

📌 8. RichText (고급)

👉 여러 스타일 혼합

RichText(
  text: TextSpan(
    text: "Hello ",
    style: TextStyle(color: Colors.black),
    children: [
      TextSpan(
        text: "Flutter",
        style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
      ),
    ],
  ),
)

---

📌 9. 핵심 정리

기능	방법
텍스트 표시	Text()
스타일	TextStyle
정렬	textAlign
줄 제한	maxLines
말줄임	overflow

---

🚀 한 줄 핵심

👉 Text + TextStyle = 모든 텍스트 UI의 기본

---

🔥 실무 팁

• 긴 텍스트 → overflow 꼭 처리
• 제목/본문 → 스타일 구분 필수
• 반복 스타일 → Theme로 관리 추천

---