Text 위젯 스타일링

TextStyle을 사용해 색상, 크기, 두께, 글꼴 등을 설정할 수 있습니다.

텍스트 스타일링 예제

Text(
  '안녕하세요, Flutter!',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
    letterSpacing: 2.0,
  ),
)

커스텀 글꼴(Font) 적용 방법

1. puspec.yaml에 글꼴 등록

flutter:
  fonts:
    - family: NanumGothic
      fonts:
        - asset: assets/fonts/NanumGothic-Regular.ttf
        - asset: assets/fonts/NanumGothic-Bold.ttf
          weight: 700

2. Text에서 사용 방법

Text(
  '커스텀 글꼴 적용 텍스트',
  style: TextStyle(
    fontFamily: 'NanumGothic',
    fontSize: 20,
  ),
)

RichText 사용하기

여러 스타일의 텍스트를 한 줄에 표시할 때 사용합니다.

RichText 예제

RichText(
  text: TextSpan(
    children: [
      TextSpan(text: 'Flutter ', style: TextStyle(color: Colors.blue, fontSize: 20)),
      TextSpan(text: '는 정말 ', style: TextStyle(color: Colors.black, fontSize: 20)),
      TextSpan(text: '재미있어요!', style: TextStyle(color: Colors.red, fontSize: 20, fontWeight: FontWeight.bold)),
    ],
  ),
)

따라 하기

• 자신이 좋아하는 글꼴을 프로젝트에 추가해보고 적용해보세요.
• RichText를 사용해 색상과 굵기가 다른 텍스트 문장을 만들어보세요.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('TextStyle & Font Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Using TextStyle with custom font
              Text(
                'Hello, Flutter!',
                style: TextStyle(
                  fontFamily: 'Roboto',
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                  color: Colors.blue,
                ),
              ),
              const SizedBox(height: 20),
              // Using RichText with multiple styles
              RichText(
                text: TextSpan(
                  children: [
                    TextSpan(
                      text: 'Flutter ',
                      style: TextStyle(
                        fontFamily: 'Roboto',
                        color: Colors.blue,
                        fontSize: 20,
                      ),
                    ),
                    TextSpan(
                      text: 'is really ',
                      style: TextStyle(
                        fontFamily: 'Roboto',
                        color: Colors.black,
                        fontSize: 20,
                      ),
                    ),
                    TextSpan(
                      text: 'awesome!',
                      style: TextStyle(
                        fontFamily: 'Roboto',
                        color: Colors.red,
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}