[Flutter] GoogleFontsでTextのフォントを変更する

今回はGoogleFontを使用してTextウィジェットのフォントを変更する方法です！
前回はアプリ内にフォントファイルを設置して設定する方法を紹介していますので合わせてどうぞ！
　→ AssetsでTextウィジェットのフォントを変更する

google_fontsパッケージを追加する

GoogleFontsを適用するためのパッケージが公開されています。
パッケージの追加方法は2種類あるのでお好みで！

コマンドから追加

ターミナルからプロジェクト直下のディレクトリを起動し、以下のコマンドを実行します。
お使いのFlutterのバージョンや、他のパッケージとの兼ね合いを考慮して使用可能なバージョンを追加してくれるので便利です。

flutter pub add google_fonts

pubspec.yamlを編集

pubspec.yamlを編集して追加することもできます。
^6.2.1 のようにバージョンを指定してインストールできるので、上記の方法でうまく行かない場合などにお試しください。

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.8

  # ---------- ここを追加 ----------
  google_fonts: ^6.2.1

編集が終わったら以下のコマンドを実行してパッケージをダウンロードします。

flutter pub get

使用するフォントを探す

GoogleFontsパッケージではGoogle Fontsのフォントを使用可能です。
左のLanguageフィールドにJapaneseを指定すると日本語フォント一覧が表示されますので、お好みのフォントを探して下さい。
本記事では綺麗な日本語フォントとして広く使用されているNoto Sansを使用します。

Textウィジェットに設定する

TextウィジェットのstyleにGoogleFontsを設定することでフォントを反映させられます。
GoogleFonts.<フォント名> にはGoogleFontsで探したフォント名を指定してください。
フォント名はFlutterに合わせてLowerCamelケースで表記されているので、スペースやアンダーバーを消して先頭以外の単語の頭文字を大文字にするとOKです！

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

Text(
  "表示したい文字",
  style: GoogleFonts.notoSansJp(),
);

全体コード

最後にGoogleFontsを適用したTextと標準フォントのTextを見比べるデモをご紹介します。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // デバッグバナーを非表示
      home: Scaffold(
        appBar: AppBar(
          title: const Align(alignment: Alignment.center, child: Text("Google Fonts Demo")),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(height: 16),
              Text(
                "フォント使用例です (GoogleFonts)",
                style: GoogleFonts.notoSansJp(fontSize: 20),
              ),
              const SizedBox(height: 16),
              const Text(
                "フォント使用例です (標準)",
                style: TextStyle(fontSize: 20),
              ),
              const SizedBox(height: 40),
              Text(
                "GoogleFontsを使えば標準の中華フォントも直せます",
                style: GoogleFonts.notoSansJp(fontSize: 14),
              ),
              const SizedBox(height: 10),
              Text(
                "直認化細 (GoogleFonts)",
                style: GoogleFonts.notoSansJp(fontSize: 20),
              ),
              const SizedBox(height: 16),
              const Text(
                "直認化細 (標準)",
                style: TextStyle(fontSize: 20),
              ),
            ],
          ),
        ),
      ),
    );
  }
}