Flutter Google Fonts에 대해서

Flutter Google Fonts란

• google_fonts는 Flutter 앱에서 Google Fonts 라이브러리를 쉽게 사용할 수 있게 해 주는 공식 패키지
• 이를 통해 수백 가지 무료 폰트를 앱에 간단한 코드로 적용가능
• 디자인 일관성과 브랜딩에 용이

https://pub.dev/packages/google_fonts 

google_fonts | Flutter package

 

Flutter Font를 적용해서 디자인 시스템을 만든 예시

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

abstract final class TextStyles {
  static TextStyle titleTextBold = GoogleFonts.poppins(
    fontSize: 50,
    fontWeight: FontWeight.bold,
  );

  static TextStyle headerTextBold = GoogleFonts.poppins(
    fontSize: 30,
    fontWeight: FontWeight.bold,
  );

  // 생략 
}

문제점

• 동적 폰트 로딩 앱 실행 시 필요한 폰트를 Google 서버에서 자동으로 다운로드 함
• 상기의 특징이 장점이자 단점이 된다

class SmallButton extends StatefulWidget {
  final String text;
  final void Function() onPressed;
  final Color color;
  final TextStyle textStyle;

  const SmallButton(
    this.text, {
    super.key,
    required this.onPressed,
    this.color = ColorStyles.primary100,
    this.textStyle = '기본 값 할당',
  });

  @override
  State<SmallButton> createState() => _SmallButton();
}

• 상기의 코드에서 textStyle을 Optional로 지정하고
• 기본 값을 생성해 주려고 하면 에러가 발생하게 된다.
• 기본 값은 const를 써야하기 때문이다.

우회 방법

import 'package:flutter/material.dart';
import 'package:flutter_recipe_app/ui/color_styles.dart';
import 'package:flutter_recipe_app/ui/text_styles.dart';

class SmallButton extends StatefulWidget {
  final String text;
  final void Function() onPressed;
  final Color color;
  final TextStyle? textStyle;

  const SmallButton(
    this.text, {
    super.key,
    required this.onPressed,
    this.color = ColorStyles.primary100,
    this.textStyle,
  });

  @override
  State<SmallButton> createState() => _SmallButton();
}

class _SmallButton extends State<SmallButton> {
  bool isPressed = false;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) {
        setState(() {
          isPressed = true;
        });
      },
      onTapUp: (_) {
        setState(() {
          isPressed = false;
        });
        widget.onPressed();
      },
      onTapCancel: () {
        setState(() {
          isPressed = false;
        });
      },
      child: Container(
        height: 44,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: isPressed ? ColorStyles.gray4 : widget.color,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              widget.text,
              style: (widget.textStyle ?? TextStyles.smallTextBold).copyWith(
                color: Colors.white,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

• 생성자에 옵셔널로 값을 주고
• 뷰에서 Optional로 처리

결론

• 처음 사용 시 런타임에서 폰트를 다운로드하기 때문에 앱 실행 초기에 잠깐 지연이 있을 수 있음
• 오프라인 상태에서 폰트가 없으면 기본 시스템 폰트로 대체됨
• const 키워드와 함께 사용할 수 없음 (런타임 함수이기 때문)
• 상기의 우회 방법은 쓸 수는 있으나 휴먼에러를 일으킬 가능성 존재
• Optional이 논리적인 이유가 아닌 런타임 컴파일 타임의 차이로 생기기 때문에 혼란을 야기
• 비용이 엄청나게 크지 않다면 로컬에서 저장하고 사용하는 것이 좋다.