【Xcode/Flutter】GoogleFontsがデバッグで反映されない時の対処

目　次

• TL;DR
• 開発環境
• フォント変更を試みる
• 全体のコードと実行結果
• 反映されない原因
• 最終的なコードと実行結果
• 参　照

TL;DR

Flutterでモバイルアプリを制作していた際、GoogleFontsでフォントを変更しようとした。
しかし、実機でデバッグした際に反映されなかった。

結論、runAppの前にWidgetsFlutterBinding ensureInitialized();を
加えることで解決した。

開発環境

• Flutter v3.16.8
• Dart v3.2.5
• Xcode v15.1
• VScode v1.86.0
• iphone 12(iOS 16.6.1)

フォント変更を試みる

GoogleFonts

GoogleFontsは無料で様々なバリエーションのフォントを利用できるサービスだ。

Flutterで使ってみる

まずはpubspec.yamlを開き、google_fontsパッケージを利用できるようにする。

pubspec.yaml

    dependencies:
      flutter:
        sdk:flutter
+     google_fonts:

次にmain.dartでパッケージが使えるようにdartファイルをインポートする。

lib/main.dart

  import 'package:flutter/material.dart';
+ import 'package:google_fonts/google_fonts.dart';

これでGoogleFontsを使う準備は完了だ。

全体のコードと実行結果

全体のコード

lib/main.dart

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

void main() {
  return runApp(
    MaterialApp(
      home: Scaffold(
          backgroundColor: Colors.red,
          appBar: AppBar(
            backgroundColor: Colors.black,
            title: Text(
              'Dicee',
              style: GoogleFonts.pacifico(
                color: Colors.white,
              ),
            ),
          ),
          body: DicePage(),
        ),
      ),
  );
}

class DicePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(children: [
        Text(
          'test text',
          style: GoogleFonts.pacifico(),
        )
      ]),
    );
  }
}

実行結果

ご覧の通り、フォントはデフォルトのままだ。

反映されない原因

VScode上では目立ったエラーが出ていなかったがXcodeでビルドする際に
以下のようなエラーが出ていた。

要約すると、バインディングが初期化されていない。初期化は必須で、
通常は下記の方法でなされる。（日本語にしても、私には意味はわかりません。）

runAppで通常は初期化されるみたいですが、今回はされてないとのことなので、
とりあえず"WidgetsFlutterBinding ensureInitialized()を追加してみることに。

結果、フォントの変更がなされた。

最終的なコードと実行結果

最終的なコード(※pubspec.yamlは変更なし)

lib/main.dart

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

void main() {
+  WidgetsFlutterBinding.ensureInitialized();
  
  return runApp(

    MaterialApp(
      home: Scaffold(
          backgroundColor: Colors.red,
          appBar: AppBar(
            backgroundColor: Colors.black,
            title: Text(
              'Dicee',
              style: GoogleFonts.pacifico(
                color: Colors.white,
              ),
            ),
          ),
          body: DicePage(),
        ),
      ),
  );
}

class DicePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(children: [
        Text(
          'test text',
          style: GoogleFonts.pacifico(),
        )
      ]),
    );
  }
}

実行結果

参　照