[flutter] 플러터(Flutter)에서 폰트(Font) 및 아이콘(Icon) 사용하기

플러터(Flutter)는 Google에서 개발한 모바일 애플리케이션 프레임워크로, 크로스플랫폼 개발을 지원합니다. 플러터에서는 다양한 폰트와 아이콘을 쉽게 사용할 수 있습니다. 이번 포스트에서는 플러터에서 폰트와 아이콘을 사용하는 방법을 알아보겠습니다.

폰트 사용하기

플러터에서 폰트를 사용하려면 다음 단계를 따르면 됩니다:

  1. 폰트 파일을 프로젝트 내의 fonts 디렉토리에 추가합니다.

  2. pubspec.yaml 파일을 열고, flutter 섹션에 폰트를 추가합니다. 예를 들어, Roboto 폰트를 추가하고 싶다면 아래와 같이 작성합니다:

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

    이 예제에서는 Roboto 폰트에는 Roboto-Regular.ttf 파일과 Roboto-Bold.ttf 파일이 포함되어 있습니다. weight 프로퍼티를 사용하여 폰트의 두께를 지정할 수 있습니다.

  3. pubspec.yaml 파일을 저장한 후, 폰트를 사용하려는 위젯 파일에서 package:flutter/material.dart를 import합니다.

  4. 원하는 위젯에서 폰트를 사용하려면, style 속성을 설정하여 폰트 패밀리와 스타일을 지정할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다:

    Text(
      '플러터 폰트 예제',
      style: TextStyle(
        fontFamily: 'Roboto',
        fontWeight: FontWeight.bold,
        fontSize: 20,
      ),
    )
    

    위의 예제에서는 Roboto 폰트의 볼드 스타일을 사용하며, 폰트 크기는 20입니다.

아이콘 사용하기

플러터에서 아이콘을 사용하려면, 다음 단계를 따르면 됩니다:

  1. pubspec.yaml 파일을 열고, dependencies 섹션에 flutter_icons 패키지를 추가합니다. 예를 들어, 다음과 같이 작성합니다:

    dependencies:
      flutter_icons: ^1.1.0
    
  2. pubspec.yaml 파일을 저장한 후, 터미널에서 flutter pub get 명령어를 실행하여 의존성을 설치합니다.

  3. 원하는 위젯에서 아이콘을 사용하려면, package:flutter_icons/flutter_icons.dart를 import합니다.

  4. Icon 위젯을 사용하여 아이콘을 표시할 수 있습니다. 예를 들어, FontAwesome 패키지의 heart 아이콘을 사용하려면 다음과 같이 작성할 수 있습니다:

    Icon(FontAwesome.heart)
    

    또는, 아이콘의 크기나 색상을 변경하고 싶다면, Icon 위젯의 sizecolor 속성을 조정할 수 있습니다:

    Icon(
      FontAwesome.heart,
      size: 30,
      color: Colors.red,
    )
    

이제 플러터에서 폰트와 아이콘을 손쉽게 사용할 수 있습니다. 폰트 및 아이콘을 마음에 드는 스타일로 사용하여 애플리케이션을 개발해보세요!

참고 링크: