Flutter의 텍스트 관련 위젯

Flutter

Flutter의 텍스트 관련 위젯

Flutter에서 텍스트를 표시하고 스타일을 지정하는 데 사용할 수 있는 여러 위젯이 있습니다. 대표적으로 Text, SelectableText, RichText 등이 있으며, 각 위젯의 특징과 사용법을 살펴보겠습니다.

1. 기본 텍스트 위젯 (Text)

Flutter에서 텍스트를 표시하는 가장 기본적인 위젯입니다.

1.1. 기본 사용법

Text("Hello, Flutter!")

• 단순한 텍스트를 화면에 표시할 때 사용합니다.

1.2. 스타일 적용 (TextStyle)

Text(
  "Hello, Flutter!",
  style: TextStyle(
    fontSize: 24,                // 글자 크기
    fontWeight: FontWeight.bold, // 굵기
    color: Colors.blue,          // 색상
    letterSpacing: 2.0,          // 글자 간격
    wordSpacing: 5.0,            // 단어 간격
    fontStyle: FontStyle.italic, // 기울임
    decoration: TextDecoration.underline, // 밑줄
  ),
)

1.3. TextStyle 주요 속성

속성	설명
fontSize	글자 크기
fontWeight	굵기 (FontWeight.bold, FontWeight.w300 등)
color	글자 색상 (Colors.red, Color(0xFF42A5F5))
letterSpacing	글자 간 간격
wordSpacing	단어 간 간격
fontStyle	기울임 (FontStyle.italic)
decoration	텍스트 장식 (underline, overline, lineThrough)

2. 선택 가능한 텍스트 (SelectableText)

기본 Text 위젯은 사용자가 텍스트를 복사할 수 없음. SelectableText를 사용하면 사용자가 텍스트를 선택하여 복사할 수 있음.

2.1. 사용법

SelectableText(
  "이 텍스트를 복사할 수 있습니다.",
  style: TextStyle(fontSize: 18, color: Colors.black),
)

• Text → 복사 불가
• SelectableText → 텍스트를 길게 눌러 복사 가능

3. 스타일이 다양한 텍스트 (RichText)

RichText를 사용하면 한 개의 TextSpan 안에서 여러 스타일을 적용할 수 있습니다.

3.1. 사용법

RichText(
  text: TextSpan(
    text: "Hello, ",
    style: TextStyle(fontSize: 24, color: Colors.black),
    children: [
      TextSpan(
        text: "Flutter",
        style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
      ),
      TextSpan(
        text: " World!",
        style: TextStyle(color: Colors.red, fontStyle: FontStyle.italic),
      ),
    ],
  ),
)

• 여러 개의 스타일을 한 번에 적용할 수 있음.
• TextSpan을 사용하여 텍스트 일부만 색상, 크기, 굵기 변경 가능.

4. 텍스트 정렬 및 최대 줄 제한

4.1. 텍스트 정렬 (TextAlign)

Text(
  "이 텍스트는 가운데 정렬됩니다.",
  textAlign: TextAlign.center,
)

4.2. 가능한 정렬 값

• TextAlign.left (기본값, 왼쪽 정렬)
• TextAlign.center (가운데 정렬)
• TextAlign.right (오른쪽 정렬)
• TextAlign.justify (양쪽 정렬)

4.3. 줄 수 제한 및 말줄임 (maxLines, overflow)

Text(
  "이 텍스트는 길어서 한 줄에 다 표시되지 않습니다. 하지만 최대 1줄까지만 표시되며, 초과하면 말줄임표(...)가 추가됩니다.",
  maxLines: 1,
  overflow: TextOverflow.ellipsis, // 초과된 부분 "..."
)

• maxLines: 최대 줄 수 지정
• overflow: 줄 수를 초과했을 때 처리 방식
  • TextOverflow.clip → 초과된 부분 제거
  • TextOverflow.ellipsis → 초과된 부분 ...으로 표시
  • TextOverflow.fade → 페이드 아웃 효과

5. 자동 줄 바꿈 (softWrap)

긴 텍스트가 있을 때 자동으로 줄 바꿈이 되도록 설정할 수 있습니다.

5.1. 사용법

Text(
  "이 텍스트는 자동으로 줄 바꿈이 적용됩니다. 화면 크기에 맞춰 자동으로 줄을 바꿉니다.",
  softWrap: true, // 기본값 true (자동 줄 바꿈)
)

• softWrap: false → 한 줄로만 표시 (스크롤 필요)
• softWrap: true → 화면 크기에 맞춰 자동 줄 바꿈

6. 커스텀 폰트 적용하기

기본적으로 Flutter는 Roboto 폰트를 사용합니다.
커스텀 폰트 적용하려면 pubspec.yaml 파일을 수정해야 합니다.

1단계: 폰트 추가

1. assets/fonts/ 폴더에 .ttf 폰트 파일을 추가합니다.
2. pubspec.yaml 파일을 수정합니다.

1.  

Text(
  "커스텀 폰트 적용",
  style: TextStyle(fontFamily: "CustomFont", fontSize: 24),
)

폰트 적용 후 실행

flutter pub get

7. 텍스트 위젯 요약

위젯	설명
Text	기본적인 텍스트 표시
SelectableText	사용자가 복사할 수 있는 텍스트
RichText	여러 스타일을 적용할 수 있는 텍스트
TextAlign	왼쪽, 가운데, 오른쪽, 양쪽 정렬 가능
maxLines & overflow	최대 줄 수 제한 및 말줄임(...) 표시
softWrap	자동 줄 바꿈 설정
Custom Font	폰트 변경 가능 (pubspec.yaml 수정)

728x90

Flutter의 텍스트 관련 위젯 예제

텍스트 위쳇 예제

main.dart 코드

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: TextExampleScreen(),
    );
  }
}

class TextExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("텍스트 관련 위젯 예제")),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 1. 기본 텍스트 위젯
            Text(
              "기본 텍스트 위젯",
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 10),

            // 2. 스타일 적용된 텍스트
            Text(
              "이 텍스트는 색상, 크기, 글꼴 스타일이 적용되었습니다.",
              style: TextStyle(
                fontSize: 18,
                color: Colors.blue,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic,
                decoration: TextDecoration.underline,
              ),
            ),
            SizedBox(height: 10),

            // 3. 선택 가능한 텍스트
            SelectableText(
              "이 텍스트는 선택 및 복사가 가능합니다!",
              style: TextStyle(fontSize: 18, color: Colors.green),
            ),
            SizedBox(height: 10),

            // 4. RichText (다양한 스타일 혼합)
            RichText(
              text: TextSpan(
                text: "이것은 ",
                style: TextStyle(fontSize: 18, color: Colors.black),
                children: [
                  TextSpan(
                    text: "강조된 텍스트",
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.red),
                  ),
                  TextSpan(
                    text: " 입니다.",
                  ),
                ],
              ),
            ),
            SizedBox(height: 10),

            // 5. TextAlign (정렬 적용)
            Text(
              "이 텍스트는 가운데 정렬됩니다.",
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 18, backgroundColor: Colors.yellow),
            ),
            SizedBox(height: 10),

            // 6. 최대 줄 제한 및 말줄임 효과
            Text(
              "이 텍스트는 길어서 한 줄에 다 표시되지 않지만 최대 1줄까지만 표시되며, 초과된 부분은 말줄임표(...)로 표시됩니다.",
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(fontSize: 16),
            ),
            SizedBox(height: 10),

            // 7. TextField (사용자 입력)
            TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: "텍스트 입력",
                hintText: "여기에 입력하세요",
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 

1. main() 함수

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

• runApp(MyApp())을 실행하면 Flutter의 위젯 트리가 생성됩니다.

2. MyApp 클래스 (앱의 기본 설정)

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 디버그 배너 제거
      home: TextExampleScreen(), // 앱이 실행되면 TextExampleScreen() 화면을 보여줌
    );
  }
}

• MaterialApp은 Material Design UI를 사용하는 앱을 만들 때 필수적으로 사용됨
• home: TextExampleScreen() → 앱 실행 시 TextExampleScreen 화면이 표시됨

3. TextExampleScreen 클래스 (UI 화면)

class TextExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("텍스트 관련 위젯 예제")),
      body: Padding(
        padding: EdgeInsets.all(16), // 모든 방향에 16px의 패딩 추가
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start, // 왼쪽 정렬
          children: [

• Scaffold → 기본적인 화면 구조 제공 (앱바, 본문, 플로팅 버튼 등)
• AppBar(title: Text("텍스트 관련 위젯 예제")) → 상단 앱바 제목 설정
• Padding → 모든 방향에 16px의 패딩 추가
• Column → 위젯들을 세로로 정렬
• crossAxisAlignment: CrossAxisAlignment.start → 왼쪽 정렬

4. Text (기본 텍스트 위젯)

Text(
  "기본 텍스트 위젯",
  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
SizedBox(height: 10),

• "기본 텍스트 위젯" → 표시할 텍스트
• TextStyle(fontSize: 20, fontWeight: FontWeight.bold) → 글자 크기 20px, 굵게 설정
• SizedBox(height: 10) → 위젯 간격 추가 (10px)

5. TextStyle을 활용한 스타일 적용

Text(
  "이 텍스트는 색상, 크기, 글꼴 스타일이 적용되었습니다.",
  style: TextStyle(
    fontSize: 18, // 글자 크기
    color: Colors.blue, // 글자 색상
    fontWeight: FontWeight.bold, // 굵게
    fontStyle: FontStyle.italic, // 기울임꼴
    decoration: TextDecoration.underline, // 밑줄 추가
  ),
),
SizedBox(height: 10),

• fontSize: 18 → 글자 크기 설정
• color: Colors.blue → 글자 색상 설정
• fontWeight: FontWeight.bold → 글자를 굵게
• fontStyle: FontStyle.italic → 이탤릭체 적용
• decoration: TextDecoration.underline → 밑줄 추가

6. SelectableText (복사 가능한 텍스트)

SelectableText(
  "이 텍스트는 선택 및 복사가 가능합니다!",
  style: TextStyle(fontSize: 18, color: Colors.green),
),
SizedBox(height: 10),

• SelectableText → 기본 Text와 달리 사용자가 길게 눌러 선택 및 복사 가능
• TextStyle 적용 가능 (fontSize, color 등 설정 가능)
• 사용자에게 **복사할 수 있는 정보(예: 이메일, 주소, 계좌번호 등)**를 제공할 때 유용

7. RichText (텍스트 스타일 여러 개 적용)

RichText(
  text: TextSpan(
    text: "이것은 ",
    style: TextStyle(fontSize: 18, color: Colors.black),
    children: [
      TextSpan(
        text: "강조된 텍스트",
        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.red),
      ),
      TextSpan(
        text: " 입니다.",
      ),
    ],
  ),
),
SizedBox(height: 10),

• TextSpan을 이용하여 특정 단어만 스타일 변경 가능
• "강조된 텍스트" → 굵게 & 빨간색으로 표시
• 블로그 글, 뉴스 기사에서 특정 키워드 강조할 때 유용

8. TextAlign (텍스트 정렬)

Text(
  "이 텍스트는 가운데 정렬됩니다.",
  textAlign: TextAlign.center, // 가운데 정렬
  style: TextStyle(fontSize: 18, backgroundColor: Colors.yellow),
),
SizedBox(height: 10),

• TextAlign.center → 가운데 정렬
• backgroundColor: Colors.yellow → 배경색 추가
• TextAlign.left → 왼쪽 정렬 (기본값)
• TextAlign.right → 오른쪽 정렬
• TextAlign.justify → 양쪽 정렬

9. maxLines & overflow (줄 제한 및 말줄임 효과)

Text(
  "이 텍스트는 길어서 한 줄에 다 표시되지 않지만 최대 1줄까지만 표시되며, 초과된 부분은 말줄임표(...)로 표시됩니다.",
  maxLines: 1, // 최대 1줄까지만 표시
  overflow: TextOverflow.ellipsis, // 초과된 부분 "..." 표시
  style: TextStyle(fontSize: 16),
),
SizedBox(height: 10),

• maxLines: 1 → 최대 1줄까지만 표시
• overflow: TextOverflow.ellipsis → 초과된 부분은 "..."으로 표시
• 뉴스 앱, 메시지 앱에서 긴 텍스트를 한 줄로 표시할 때 유용

10. TextField (사용자 입력)

TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: "텍스트 입력",
    hintText: "여기에 입력하세요",
  ),
),

• border: OutlineInputBorder() → 외곽선 추가
• labelText: "텍스트 입력" → 입력창 상단에 제목 표시
• hintText: "여기에 입력하세요" → 입력 전 힌트 표시
• 로그인 폼, 검색창, 댓글 입력창 등 사용자 입력이 필요한 경우 필수