【Flutter】Google fontsを使ってみる

Flutterでは何もしなければデフォルトのゴシック系のfontが表示されますが、Fontを変えたい、もう少し日本語のfontにしたい場合Google fontsを使うと便利です。

ここではGoogle fontsのインストールのやり方と具体的な使い方について紹介します。

Google fontsをインストールする

puv.devから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のtheme内に記入してください。

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

個別で使用する

個別で使用する場合はTextのstyle: GoogleFonts.使いたいフォントで囲い、その中に色やfontSizeを設定していきます。

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

GoogleFonts内にあるSawarabi Minchoを使うとこのように表示されます。

Fontの探し方

使いたいFontの探し方ですが
まずはGoogle Fontsのページを開いてください。

Langageの選択があるのでここでJapaneseを選択してください。
※探している書体が日本語の場合です。

ここではSawarabi Minchoを使いたいと思います。

Flutterでの探し方

GoogleFontsと記入した後、command keyを押しながらクリックします。

するとgoogle_font.dartが表示されます。

こちらをしたにスクロールしていくとfontの名前が乗っているので検索するなりして探します。

Sawarabi Minchoを発見したので右側にあるGoogleFonts.sawarabiMinchoを使用したいところで貼り付ければOKです。

'Sawarabi Mincho': GoogleFonts.sawarabiMincho,

以上がFlutterでGoogle fontsを使う簡単な説明でした。