Flutter에서는 아무것도 하지 않으면 디폴트의 고딕계의 font가 표시됩니다만, Font를 바꾸고 싶은, 좀 더 일본어의 font로 하고 싶은 경우 Google fonts 를 사용하면 편리합니다.

이 섹션에서는 Google fonts 설치 방법과 구체적인 사용법을 소개합니다.

Google fonts 설치

부 v. 에서 v 에서 google_fonts 검색
google_fonts 의 페이지가 표시되므로 Install 를 클릭합니다.


다음 페이지에 설치하는 데 필요한 소스가 있습니다.


google_fonts: ^2.1.0 의 부분을 pubspec.yaml 의 dependencies 에 붙여넣습니다.

dependencies:
  google_fonts: ^2.1.0

vscode라면 그대로 저장으로 자동 설치됩니다.
자동 설치되지 않으면 아래의 cmd를 두드려보십시오.

flutter pub add google_fonts

Google fonts로 보기

먼저 사용하고 싶은 dart 파일에서 가져옵니다.

import 'package:google_fonts/google_fonts.dart';

전체 페이지로 로드

전체 페이지에서 Google Font를 사용하려면 MaterialApp

MaterialApp(
  theme: ThemeData(
    textTheme: GoogleFonts.sawarabiMinchoTextTheme(
      Theme.of(context).textTheme,
    ),
  ),
);

개별적으로 사용

개별적으로 사용하는 경우는 theme 의 Text 로 둘러싸, 그 안에 색이나 fontSize 를 설정해 갑니다.

Text(
  'はじめる',
  style: GoogleFonts.sawarabiMincho(
    textStyle: Theme.of(context).textTheme.headline4
    color: Color(0xFF000000),
    fontSize: 20.0,
  ),
),

GoogleFonts 내에 있는 style: GoogleFonts.使いたいフォント를 사용하면 이와 같이 표시됩니다.

Font를 찾는 방법

사용하고 싶은 Font를 찾는 방법입니다.
먼저 Google Fonts 페이지를 엽니다.

Langage의 선택이 있으므로 여기에서 Sawarabi Mincho를 선택하십시오.
※찾는 서체가 일본어인 경우입니다.



여기에서는 Japanese 를 사용하고 싶습니다.

Flutter에서 찾는 방법

GoogleFonts를 작성한 후 command key를 누른 상태에서 클릭합니다.



그러면 Sawarabi Mincho가 표시됩니다.



이쪽을 했을 때 스크롤 해 가면 font의 이름이 타고 있으므로 검색하는 되어 검색합니다.

google_font.dart 를 발견했으므로 오른쪽에 있는 Sawarabi Mincho 를 사용하고 싶은 곳에서 붙여 넣으면 OK입니다.

'Sawarabi Mincho': GoogleFonts.sawarabiMincho,

이상이 Flutter에서 GoogleFonts.sawarabiMincho를 사용하는 간단한 설명이었습니다.