[flutter] - Flutter에서의 폰트 및 텍스트 스타일 적용 방법

Flutter는 크로스 플랫폼 모바일 애플리케이션 개발을 위한 도구이며, 다양한 UI 요소를 포함하고 있습니다. 이 중에서도 폰트와 텍스트 스타일은 앱의 디자인과 사용자 경험에 큰 영향을 미칩니다. Flutter에서는 간단하게 폰트를 적용하고 텍스트를 스타일링하는 방법을 제공합니다. 이번 글에서는 Flutter에서의 폰트 및 텍스트 스타일 적용 방법에 대해 알아보겠습니다.

폰트 설정

Flutter에서 폰트를 설정하는 방법은 다음과 같습니다:

1. 폰트 파일 추가하기

먼저, 사용하려는 폰트 파일을 Flutter 프로젝트의 fonts 폴더에 추가합니다. 예를 들어, assets/fonts 폴더에 myfont.ttf 폰트 파일을 추가한 후, pubspec.yaml 파일에 아래와 같이 폰트를 등록합니다:

flutter:
  fonts:
    - family: MyFont
      fonts:
        - asset: assets/fonts/myfont.ttf

2. 폰트 패밀리 정의하기

폰트 패밀리는 TextStyle에서 사용될 수 있도록 정의해야 합니다. 폰트 패밀리를 정의하는 방법은 다음과 같습니다:

class MyFonts {
  static const String myFont = 'MyFont';
}

3. 폰트 사용하기

이제 폰트를 사용할 수 있습니다. TextStyle 객체의 fontFamily 속성을 폰트 패밀리로 설정하면 됩니다:

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontFamily: MyFonts.myFont,
    fontSize: 20,
  ),
)

텍스트 스타일링

Flutter에서 텍스트를 스타일링하는 방법은 다음과 같습니다:

1. 기본 스타일 적용하기

TextStyle 객체를 사용하여 텍스트에 기본 스타일을 적용할 수 있습니다:

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.italic,
    color: Colors.blue,
  ),
)

2. 텍스트 정렬하기

textAlign 속성을 사용하여 텍스트의 정렬을 설정할 수 있습니다:

Text(
  'Hello, Flutter!',
  textAlign: TextAlign.center,
)

3. 텍스트 감싸기

Container를 사용하여 텍스트를 감싸고 여러 스타일을 적용할 수 있습니다:

Container(
  decoration: BoxDecoration(
    color: Colors.yellow,
    borderRadius: BorderRadius.circular(10),
  ),
  padding: EdgeInsets.all(10),
  child: Text(
    'Hello, Flutter!',
    style: TextStyle(
      fontSize: 20,
    ),
  ),
)

4. 텍스트 그림자 추가하기

TextShadow를 사용하여 텍스트에 그림자를 추가할 수 있습니다:

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 20,
    shadows: [
      Shadow(
        offset: Offset(2, 2),
        blurRadius: 5,
        color: Colors.grey,
      ),
    ],
  ),
)

위의 예시는 Flutter에서 폰트 및 텍스트 스타일을 적용하는 간단한 방법들을 보여줍니다. 이를 참고하여 Flutter 애플리케이션에 원하는 폰트와 텍스트 스타일을 적용해보세요!


참고 문서: