【Flutter】アプリ内でGoogleフォントを適用させる方法を徹底解説！【サンプルコードあり】

今回はFlutterアプリにGoogleフォントを適用させる方法を解説してききます。

フォントをアプリによって使い分けるとよりアプリの世界観を引き立てることができるので是非積極的に活用してみてください！

環境

bash

$ flutter --version
Flutter 2.8.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 77d935af4d (8 months ago) • 2021-12-16 08:37:33 -0800
Engine • revision 890a5fca2e
Tools • Dart 2.15.1

エディタはVScodeを使っていきます。

使いたいフォントを探す

こちらからアプリで使いたいフォントを探しましょう。

今回は例として「DotGothic16」というフォントを選んでみます。

使いたいフォントが見つかったらフォント名を覚えておきましょう。

google_fontsをインポート

プロジェクトのpubspec.yamlに「google_fonts」を記載します。

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  google_fonts: 2.2.0　// ←バージョンはキャロット記号なしで指定する。

google_fontsバージョンはキャロット記号(^)なしのバージョンで指定しないと「Flutter Error: No named parameter with the name ‘displayLarge’」とエラーを吐かれるので注意

参考：https://stackoverflow.com/questions/70997381/flutter-error-no-named-parameter-with-the-name-displaylarge

追記したらpub getコマンドを叩いて反映させましょう。

bash

flutter pub get

フォントの指定方法

sample.dart

import 'package:google_fonts/google_fonts.dart';

import文を追記して「command」を押しながらカーソルを合わせてクリックするとgoogle_fontsで使用できるフォントの一覧が確認できます。

「command」+Fでさっき見つけたフォントを検索します。

部分的にフォントを適用させたい時

部分的にフォントを適用させたい時はText Widgetのstyleプロパティに

GoogleFonts.{フォント名}()

と指定してあげます。

これでAppBarにはacme、bodyの中央テキストにはdotGothic16を指定できました。

sample.dart

import 'package:google_fonts/google_fonts.dart';

...
home: Scaffold(
  appBar: AppBar(
    title: Text(
      "GoogleFonts",
      style: GoogleFonts.acme(), // フォントをacmeに指定
    ),
  ),
  body: Center(
    child: Text(
      "GoogleFonts",
      style: GoogleFonts.dotGothic16( // フォントをdotGothic16に指定(
        textStyle: TextStyle(
          fontSize: 50,
        ),
      ),
    ),
  ),
),
...

アプリ全体にフォントを適用させたい時

全体にフォントを適用させたい時は「MaterialApp > theme > textTheme」に

GoogleFonts.{フォント名}TextTheme()

と記載します。

こうすると無事アプリ全体のフォントをdotGothic16に指定できました。

sample.dart

import 'package:google_fonts/google_fonts.dart';

...
return MaterialApp(
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
    // アプリ全体のフォントをdotGothic16に指定
    textTheme: GoogleFonts.dotGothic16TextTheme(),
  ),
  home: Scaffold(
    appBar: AppBar(
      title: Text("GoogleFonts"),
    ),
    body: Center(
      child: Text(
        "GoogleFonts",
        style: TextStyle(
          fontSize: 50,
        ),
      ),
    ),
  ),
);
...

※D8: Cannot fit requested classes in a single dex file (# methods: 68419 > 65536)とエラーが出る時

Androidでのビルド時に発生する64K問題と呼ばれる現象らしい。

64K問題

Androidのビルドはビルドシステムの都合でメソッド数が65536を超えるとビルドできないという制約があります。

この制約によりビルドが止まってしまう現象を「64k問題」と呼ばれたりしています。

build.gradleに「multiDexEnabled true」を追記する事でメソッド数が65536超えてもビルドが出来るようにします。

android/app/build.gradle

...    
defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "XXXXX.XXXXX.XXXXX"
        minSdkVersion 19
        targetSdkVersion 30
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        multiDexEnabled true  # ←を追加
 }
...