Text와 스타일링 — TextStyle, Theme, GoogleFonts

텍스트는 모든 앱에서 가장 많이 사용하는 위젯입니다. Flutter에서 텍스트를 예쁘게 표시하고, 앱 전체에 일관된 스타일을 적용하는 방법을 정리해보겠습니다.

Text 위젯 기본

DART

// 기본 텍스트
const Text('안녕하세요')

// 스타일 적용
Text(
  '스타일이 적용된 텍스트',
  style: TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
    letterSpacing: 1.5,    // 글자 간격
    wordSpacing: 3.0,      // 단어 간격
    height: 1.5,           // 줄 높이 (배수)
    decoration: TextDecoration.underline,
    decorationColor: Colors.red,
    decorationStyle: TextDecorationStyle.dashed,
  ),
)

텍스트 오버플로우 처리

DART

Text(
  '이 텍스트는 매우 길어서 한 줄에 다 표시되지 않을 수 있습니다. 이런 경우 오버플로우 처리가 필요합니다.',
  maxLines: 2,                           // 최대 줄 수
  overflow: TextOverflow.ellipsis,       // 말줄임표(...)
  softWrap: true,                        // 자동 줄바꿈
)

overflow 옵션	동작
`TextOverflow.clip`	잘라냄 (기본)
`TextOverflow.ellipsis`	말줄임표(...)
`TextOverflow.fade`	페이드 아웃
`TextOverflow.visible`	영역 밖에도 표시

RichText — 한 문단에 여러 스타일

DART

RichText(
  text: TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: const [
      TextSpan(text: '이것은 '),
      TextSpan(
        text: '굵은 텍스트',
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
      TextSpan(text: '이고, '),
      TextSpan(
        text: '파란색 텍스트',
        style: TextStyle(color: Colors.blue),
      ),
      TextSpan(text: '입니다.'),
    ],
  ),
)

// Text.rich로 더 간결하게 작성 가능
Text.rich(
  TextSpan(
    text: '가격: ',
    children: [
      TextSpan(
        text: '₩29,900',
        style: TextStyle(
          fontWeight: FontWeight.bold,
          color: Colors.red,
        ),
      ),
    ],
  ),
)

Theme으로 텍스트 스타일 관리

앱 전체에서 일관된 텍스트 스타일을 사용하려면 Theme을 활용합니다.

DART

MaterialApp(
  theme: ThemeData(
    textTheme: const TextTheme(
      displayLarge: TextStyle(
        fontSize: 32,
        fontWeight: FontWeight.bold,
      ),
      titleLarge: TextStyle(
        fontSize: 22,
        fontWeight: FontWeight.w600,
      ),
      bodyLarge: TextStyle(
        fontSize: 16,
        height: 1.5,
      ),
      bodyMedium: TextStyle(
        fontSize: 14,
        height: 1.5,
      ),
      labelLarge: TextStyle(
        fontSize: 14,
        fontWeight: FontWeight.w500,
      ),
    ),
  ),
  home: const HomePage(),
)

Theme 스타일 사용

DART

// Theme에서 정의한 스타일 사용
Text(
  '제목',
  style: Theme.of(context).textTheme.titleLarge,
)

// Theme 스타일에 추가 속성을 더할 때
Text(
  '커스텀 제목',
  style: Theme.of(context).textTheme.titleLarge?.copyWith(
    color: Colors.blue,
    letterSpacing: 1.2,
  ),
)

면접 포인트: 하드코딩된 TextStyle 대신 Theme의 textTheme을 사용하면, 디자인 시스템 변경 시 한 곳만 수정하면 됩니다. 유지보수성이 크게 향상됩니다.

Google Fonts 적용

YAML

# pubspec.yaml
dependencies:
  google_fonts: ^6.0.0

DART

import 'package:google_fonts/google_fonts.dart';

// 개별 위젯에 적용
Text(
  '구글 폰트 텍스트',
  style: GoogleFonts.notoSansKr(
    fontSize: 18,
    fontWeight: FontWeight.w500,
  ),
)

// 앱 전체에 적용
MaterialApp(
  theme: ThemeData(
    textTheme: GoogleFonts.notoSansKrTextTheme(
      Theme.of(context).textTheme,
    ),
  ),
)

로컬 폰트 사용

YAML

# pubspec.yaml
flutter:
  fonts:
    - family: Pretendard
      fonts:
        - asset: assets/fonts/Pretendard-Regular.otf
          weight: 400
        - asset: assets/fonts/Pretendard-Bold.otf
          weight: 700

DART

Text(
  '로컬 폰트',
  style: TextStyle(
    fontFamily: 'Pretendard',
    fontSize: 16,
  ),
)

SelectableText — 텍스트 선택 가능

기본 Text 위젯은 텍스트 선택이 안 됩니다. 복사 기능이 필요하면 SelectableText를 사용하세요.

DART

SelectableText(
  '이 텍스트는 드래그로 선택할 수 있습니다.',
  style: const TextStyle(fontSize: 16),
  onTap: () => print('텍스트 탭됨'),
)

// 전체 영역에 텍스트 선택 활성화
SelectionArea(
  child: Column(
    children: const [
      Text('이 텍스트도'),
      Text('선택 가능합니다'),
    ],
  ),
)

텍스트 스타일 확장 패턴

DART

// 프로젝트 전체에서 재사용할 스타일 정의
abstract class AppTextStyles {
  static const heading1 = TextStyle(
    fontSize: 28,
    fontWeight: FontWeight.bold,
    height: 1.3,
  );

  static const heading2 = TextStyle(
    fontSize: 22,
    fontWeight: FontWeight.w600,
    height: 1.3,
  );

  static const body = TextStyle(
    fontSize: 16,
    height: 1.6,
  );

  static const caption = TextStyle(
    fontSize: 12,
    color: Colors.grey,
  );
}

// 사용
Text('제목', style: AppTextStyles.heading1)

정리

TextStyle로 폰트 크기, 굵기, 색상, 줄 높이 등을 지정합니다
RichText 또는 Text.rich로 한 문단에 여러 스타일을 혼합할 수 있습니다
Theme.of(context).textTheme을 활용하면 일관된 디자인을 유지할 수 있습니다
한국어 폰트는 Google Fonts의 notoSansKr이나 로컬 Pretendard를 추천합니다
텍스트 선택이 필요하면 SelectableText나 SelectionArea를 사용하세요