Flutter 앱 개발 5 : 테마 설정 (폰트, 칼라 코드)

1. 폰트 추가

일단, 아래 페이지에서 NexonLv2Gothic 파일을 다운로드 한다.

>NEXON LEVEL UP (레벨업) – 넥슨 브랜드 인벤토리

프로젝트 폴더에 assets/fonts 디렉토리를 만들고 아래 두 파일을 복사한다.

• NEXON Lv2 Gothic Light.ttf
• NEXON Lv2 Gothic Medium.ttf

프로젝트에 폰트 추가

Nexon Lv2 폰트는 무료로 상업적 사용이 가능한 폰트다. 우리는 Light와 Medium 폰트 두가지를 사용할 계획이다.

마지막으로, 프로젝트 설정 파일인 pubspec.yaml 가장 하단의 flutter 속성 아래 fonts 속성을 추가하자.

# pubspec.yaml

name: apod
description: Space Daily
publish_to: 'none'
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

  # font 추가
  fonts:
    - family: NexonLv2GothicLight
      fonts:
        - asset: assets/fonts/NEXON Lv2 Gothic Light.ttf
    - family: NexonLv2GothicMedium
      fonts:
        - asset: assets/fonts/NEXON Lv2 Gothic Medium.ttf

참고로 family 는 코드 내에서 사용할 폰트 이름이고, fonts -> assets 속성은 실제 폰트 파일의 위치를 기술하면 된다.

 

2. 테마 설정 - 폰트, 칼라 코드 등

이전 포스트 에서 작성 된 MaterialApp 에 theme 속성을 아래와 같이 추가했다. 

// lib/main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Space Daily',
    // ThemeData 추가
    theme: ThemeData(
      visualDensity: VisualDensity.adaptivePlatformDensity, 
      primaryColor: Colors.black,
      fontFamily: 'NexonLv2GothicLight',
    ),
    home: FlutterLogo(),
  ));
}

테마는 ThemeData 클래스로 설정이 가능하다. 현재 설정된 내용은 간략히 아래 표와 같다.

테마 속성	설명
visualDensity	각 UI 요소들의 밀도라고 표현할 수 있다. 즉, 패딩, 마진의 기본값을 전반적으로 설정하는 속성이다. 지금 설정한 adaptivePlatformDensity는 플랫폼 속성에 따라 기본값을 변경하겠다는 뜻이다.
primaryColor	툴바, 앱바, 탭바 등 주요 위젯의 배경 색을 지정한다.
fontFamily	앱 전반의 폰트 값을 설정한다. 우리는 NexonLv2GothicLight 로 설정했다.