【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  # ←を追加
 }
...

おわり

Flutterをもっと学習したい人向けのおすすめ参考書は「【2022年最新】現役エンジニアがFlutter初学者向けおすすめ技術書3選を紹介!」で紹介しているので良ければ参考にしてください。

【2022年最新】現役エンジニアがFlutter初学者向けおすすめ技術書3選を紹介!

当ブログでは他にもFlutterに関する記事を上げているので良ければそちらも学習の参考にしてみてください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です