【Flutter】カスタムフォント|日本語のGoogleフォントをTextに実装

今回は日本語のGoogleフォントをFlutterアプリで使用する方法を紹介します。

Googleフォントはgoogle_fontsパッケージを導入しても使用できますが、google_fontsで対応していないフォントを使用したい場合は自分でカスタムする必要があります。

\ 世界最大級のオンライン学習サービス /

目次

まずはGoogleフォントを取得

Googleフォントで使用したいフォントを選択。

使用したいフォントを見つけたら「Download family」でGoogleフォントをダウンロードします。

今回は「Kaisei Opti」を使用します。

Flutterプロジェクト直下にassetsを作り、ダウンロードしたGoogleフォントのzipファイルを開き使用するttfassetsに移動させます。

flutter:
  fonts:
    - family: KaiseiOpti
      fonts:
        - asset: assets/KaiseiOpti-Regular.ttf

pubspec.yamlを開き上記コードのようにGoogleフォントを追加・更新します。familyではfontFamilyでGoogleフォントを呼び出す際の名前をつけ、assetttfのパスを渡します。

これでGoogleフォントを使用できるようになりました。

カスタムフォントの使い方

Text(
  'ハローワールド',
  style: TextStyle(
    fontFamily: 'KaiseiOpti',
    fontSize: 50,
  ),
),

Flutterに導入したGoogleフォントを使用するにはfontFamilyを使用します。

pubspec.yamlで付けたフォント名をfontFamilyの引数として渡します。

テーマフォントを変更

MaterialApp(
  theme: ThemeData(
    fontFamily: 'KaiseiOpti',
  ),
  home: Scaffold(
    appBar: AppBar(title: const Text('フラッターゼロ')),
    body: Center(
      child: Text(
        'ハローワールド',
        style: TextStyle(
          fontSize: 50,
        ),
      ),
    ),
  ),
);

materialウィジェットのデフォルトフォントを変更するにはMaterialAppfontFamilyにGoogleフォントを渡します。

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('FlutterZero')),
        body: Center(
          child: Text(
            'ハローワールド',
            style: TextStyle(
              fontFamily: 'KaiseiOpti',
              fontSize: 50,
            ),
          ),
        ),
      ),
    );
  }
}

一緒に読みたい

参考

  • URLをコピーしました!
目次