flutter & dart - 폰트 (font)

Overview.

기본적인 폰트를 맞출 수 있는 사이트 소개, 적용법

1. 사이트
2. pubspec.yml
3. 적용하기

 

1. 사이트

아무 폰트나 다운받아서 ttf 파일을 2번 과 같이 넣어줍니다.

https://fonts.google.com/selection/next-steps

Google Fonts

 

 

 

2. pubspec.yml

아래와 같이 맞춤니다.

저희는 family 레벨의 옆 이름을 사용해 적용할 수 있습니다.

...

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  fonts:
    - family: PatuaOne
      fonts:
        - asset: assets/fonts/PatuaOne-Regular.ttf

...

 

3. 적용하기

fontFamily : '위의 이름' 을 넣어 폰트를 적용시킬 수 있습니다.

      theme: ThemeData(fontFamily: 'PatuaOne'),

import 'package:class_flutter_recipe/pages/recipe_page.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(fontFamily: 'PatuaOne'),
      home: RecipePage(),
    );
  }
}