[flutter] get_it를 사용하여 플러터 앱에서 폰트 및 아이콘을 어떻게 사용하는가?

30 Nov 2023

flutter

플러터 애플리케이션에서 폰트와 아이콘은 중요한 디자인 요소입니다. get_it 패키지는 의존성 주입(Dependency Injection)을 쉽게 구현할 수 있도록 도와주는 유용한 도구입니다. 이번 포스트에서는 get_it를 사용하여 플러터 앱에서 폰트와 아이콘을 사용하는 방법에 대해 알아보겠습니다.

1. get_it 패키지 추가하기

get_it 패키지를 사용하기 위해, pubspec.yaml 파일에 아래의 의존성을 추가합니다:

dependencies:
  get_it: ^7.0.2

의존성을 추가한 후에는 flutter pub get 명령을 실행하여 패키지를 다운로드 받습니다.

2. 폰트와 아이콘을 가져오기

폰트와 아이콘을 가져오기 위해서는 먼저 해당 리소스 파일을 프로젝트에 추가해야 합니다. 이를 위해서는 pubspec.yaml 파일의 fonts 및 flutter 섹션에 다음과 같이 추가합니다:

flutter:
  fonts:
    - family: MyCustomFont
      fonts:
        - asset: assets/fonts/MyCustomFont.ttf
    - family: MaterialIcons
      fonts:
        - asset: fonts/MaterialIcons.ttf

이 예제에서는 MyCustomFont 폰트와 MaterialIcons 아이콘 폰트를 가져옵니다. 각각의 폰트는 assets/fonts 폴더에 저장되어 있습니다.

3. get_it를 사용하여 폰트 및 아이콘 사용하기

get_it를 사용하여 폰트와 아이콘을 사용하려면, main.dart 파일에서 get_it 인스턴스를 구성해야 합니다. 다음의 예제 코드를 참고하여 작성해보세요:

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

final getIt = GetIt.instance;

void main() {
  // 폰트 로드
  getIt.registerLazySingleton<TextStyle>(() => TextStyle(fontFamily: 'MyCustomFont'));
  
  // 아이콘 로드
  getIt.registerLazySingleton<IconData>(() => Icons.favorite);
  
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter GetIt Example',
      theme: ThemeData(
        // 텍스트 스타일 설정
        textTheme: TextTheme(
          bodyText2: getIt<TextStyle>()
        ),
        // 아이콘 테마 설정
        iconTheme: IconThemeData(
          color: Colors.red,
          size: 24.0,
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter GetIt Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Custom Font Example',
              style: getIt<TextStyle>(),
            ),
            SizedBox(height: 20),
            Icon(
              getIt<IconData>(),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서 getIt.registerLazySingleton 메서드를 사용하여 폰트 및 아이콘을 로드한 뒤, MyApp 클래스에서 해당 폰트 및 아이콘을 등록된 인스턴스로 사용할 수 있습니다.

이제 플러터 앱에서 get_it를 사용하여 폰트와 아이콘을 손쉽게 사용할 수 있습니다. get_it를 사용하면 의존성 주입을 효율적으로 관리할 수 있으므로 애플리케이션의 확장성과 유지보수성을 향상시킬 수 있습니다.

더 많은 get_it 패키지의 기능과 사용방법에 대해서는 공식 문서를 참고하시기 바랍니다.