플러터에서 Google Fonts 사용하기: google_fonts 패키지 사용 방법과 옵션 설명

google_fonts 패키지는 플러터 애플리케이션에서 Google Fonts를 쉽게 사용할 수 있게 도와주는 패키지입니다. Google Fonts는 다양한 글꼴을 무료로 제공하며, 이 패키지를 사용하면 플러터 애플리케이션에서 이 글꼴들을 직접 가져와 사용할 수 있습니다.

 

google_fonts score | Flutter package

 

1. 패키지 추가

먼저, google_fonts 패키지를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^6.2.1

그리고 터미널에서 flutter pub get 명령어를 사용하여 패키지를 설치합니다.

2. 기본적인 사용 예제

아래 예제는 google_fonts 패키지를 사용하여 애플리케이션의 텍스트에 Google Fonts를 적용하는 방법을 보여줍니다.

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FontExample(),
    );
  }
}

class FontExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Fonts 예제'),
      ),
      body: Center(
        child: Text(
          '안녕하세요',
          style: GoogleFonts.notoSans(fontSize: 24.0, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

위 코드에서 GoogleFonts.notoSans()를 사용하여 Noto Sans 글꼴을 적용하고 있습니다. fontSize와 fontWeight 등의 옵션을 설정하여 원하는 스타일을 적용할 수 있습니다.

3. google_fonts 패키지의 주요 옵션들

GoogleFonts 클래스

GoogleFonts 클래스는 다양한 Google Fonts를 가져와 사용할 수 있는 메서드들을 제공합니다. 예를 들어:

• GoogleFonts.openSans(): Open Sans 글꼴을 가져옵니다.
• GoogleFonts.roboto(): Roboto 글꼴을 가져옵니다.
• GoogleFonts.lato(): Lato 글꼴을 가져옵니다.

글꼴 스타일 옵션

GoogleFonts 클래스의 메서드들은 다양한 글꼴 스타일을 설정할 수 있는 매개변수들을 제공합니다:

• fontSize: 글꼴 크기를 설정합니다.
• fontWeight: 글꼴 두께를 설정합니다 (FontWeight.bold, FontWeight.normal 등).
• fontStyle: 글꼴 스타일을 설정합니다 (FontStyle.italic 등).
• color: 글꼴 색상을 설정합니다.

4. 고급 사용법

google_fonts 패키지는 다양한 고급 기능을 제공하여 사용자 정의한 글꼴을 통합하거나, 특정 스타일을 적용하는 방법을 제공합니다. 예를 들어, 특정 언어에 맞는 글꼴을 가져오거나, 웹 폰트와 같은 추가적인 리소스를 통합하는 방법 등이 있습니다.

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FontExample(),
    );
  }
}

class FontExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('고급 Google Fonts 예제'),
      ),
      body: Center(
        child: Text(
          'Hello World',
          style: GoogleFonts.getFont('Pacifico', textStyle: TextStyle(fontSize: 30.0)),
        ),
      ),
    );
  }
}

위 코드에서는 GoogleFonts.getFont()를 사용하여 Pacifico 글꼴을 가져와 적용하고 있습니다.

 

5. 폰트를 번들링하는 방법

5.1. 폰트 파일 다운로드

• 먼저, Google Fonts에서 사용할 폰트를 선택합니다.
• 각 폰트 패밀리마다 사용할 글꼴 두께와 스타일에 해당하는 폰트 파일을 다운로드합니다.
• Google Fonts에서 제공하는 파일 이름에는 글꼴 두께와 스타일 정보가 포함되어 있으므로, 파일 이름을 변경하지 않도록 주의합니다.

5.2. 폰트 파일 정리

• 프로젝트 내에 폰트 파일을 저장할 폴더를 만듭니다 (예: assets/fonts).
• 다운로드한 폰트 파일을 이 폴더에 넣습니다. 폴더 이름은 원하는 대로 지정할 수 있습니다.

5.3. pubspec.yaml 업데이트

• pubspec.yaml 파일을 열고, flutter 섹션 아래에 폰트 파일이 저장된 폴더를 assets로 추가합니다.
  예시

flutter:
  assets:
    - assets/fonts/

• 만약 폴더 이름을 다르게 지정했다면, 실제 폰트 파일이 저장된 경로로 수정해야 합니다.

5.4. google_fonts 패키지 사용

• 플러터 애플리케이션 코드에서 google_fonts 패키지를 사용하여 이 폰트를 적용합니다. 패키지를 임포트하고 GoogleFonts 클래스를 사용하여 원하는 글꼴 패밀리와 스타일을 지정합니다.

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Fonts 예제'),
        ),
        body: Center(
          child: Text(
            '안녕하세요, Google Fonts!',
            style: GoogleFonts.roboto(fontSize: 24.0, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

5.5. 폰트 번들링의 장점

• 오프라인 지원: 폰트를 assets로 번들링하면 인터넷 연결 없이도 애플리케이션이 해당 폰트를 사용할 수 있습니다.
• 성능 개선: 로컬에 번들링된 폰트를 사용하여 런타임에서의 폰트 로딩이 줄어들어 성능이 향상됩니다.
• 일관성: 다양한 빌드와 환경에서도 동일한 폰트 외형을 유지할 수 있습니다.

결론

google_fonts 패키지를 사용하면 플러터 애플리케이션에서 Google Fonts를 쉽게 가져와 사용할 수 있습니다. 이 패키지를 활용하여 다양한 글꼴을 적용하고, 사용자 정의 스타일을 적용하여 애플리케이션의 디자인을 향상시킬 수 있습니다. 또한, GoogleFonts 클래스의 다양한 메서드들을 활용하여 원하는 글꼴을 손쉽게 찾아 적용할 수 있습니다.

 

 

 

Tester Share [테스터쉐어] - Google Play 앱

 

나비일기장 [수발일기장] - Google Play 앱