Flutter

【Flutter】Flutterのパッケージやフォントをダウンロードで、Googleフォントを使用する

作成日：2022年05月01日

更新日：2022年05月01日

Flutter で Google フォントを使用します。

まずはパッケージである google_fonts を利用します。

ターミナルで、flutter pub add google_fontsを実行します。

さらにターミナルでflutter pub getを実行しましょう。

google_fonts をインポートしましょう。

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

Textの中に、styleでGoogleFontsを設定します。

dart
Text(
  'タップした回数が表示されます:',
  style: GoogleFonts.,
),

Flutter で使用できる Google フォントの一覧を調べます。

Mac と Visual Studio Code を使用している場合、GoogleFonts を command キーを押しながらクリックします。

google_fonts.dart ファイルに移動しますので、asMap の下がフォントの一覧になります。

Google フォントのサイトのスタイル名と照らし合わせて検索してみてください。

今回は、Kosugi Maru を使いたいので、google_fonts.dart で Kosugi Maru を検索します。

該当する場所の値の通り、スタイルを、GoogleFonts.kosugiMaru にします。

dart
Text(
  'タップした回数が表示されます:',
  style: GoogleFonts.kosugiMaru(),
),

フォントサイズなどを設定したい場合は、kosugiMaru の後の()に設定します。

dart
Text(
  'タップした回数が表示されます:',
  style: GoogleFonts.kosugiMaru(
    fontSize: 36,
    fontWeight: FontWeight.w700,
  ),
),

画面を確認すると、

フォントが、Kosugi Maru へ変更されました。

Google フォントを Flutter 全体に反映させたい場合、themeで設定します。

dart
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
      textTheme: GoogleFonts.kosugiTextTheme(),
    ),
    home: const MyHomePage(title: 'Flutter Demo Home Page'),
  );
}

Text の style は、通常通り使用できます。

dart
Text(
  'タップした回数が表示されます:',
  style: TextStyle(
    fontSize: 36,
    fontWeight: FontWeight.w700,
  ),
),

Google フォントのサイトにはフォントが存在するが、Flutter の google_fonts パッケージの一覧に存在しない場合、フォントをダウンロードし、使用することもできます。

今回は、BIZ UDPGothic を使用します。

assets フォルダを作成し、さらに fonts フォルダを作成します。

BIZ UDPGothic フォントをダウンロードし、fonts フォルダに移動します。

pubspec.yaml でfontsを設定します。

dart
fonts:
  - family: BIZUDPGothic
    fonts:
      - asset: assets/fonts/BIZUDPGothic-Bold.ttf
      - asset: assets/fonts/BIZUDPGothic-Regular.ttf

main.dart のthemeにfontFamifyを設定します。

dart
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
      fontFamily: 'BIZUDPGothic',
    ),
    home: const MyHomePage(title: 'Flutter Demo Home Page'),
  );
}