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

# 目　次
- [TL;DR](#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パッケージを利用できるようにする。

```diff_ruby:pubspec.yaml
    dependencies:
      flutter:
        sdk:flutter
+     google_fonts:
```
次に`main.dart`でパッケージが使えるようにdartファイルをインポートする。
```diff_ruby:lib/main.dart
  import 'package:flutter/material.dart';
+ import 'package:google_fonts/google_fonts.dart';
```

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

# 全体のコードと実行結果
### 全体のコード
```diff_ruby: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(),
        )
      ]),
    );
  }
}
```

### 実行結果
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3694810/c21aeaba-6c04-b9a7-9321-3bdd7f2375ce.png" width="400">

ご覧の通り、フォントはデフォルトのままだ。
# 反映されない原因
VScode上では目立ったエラーが出ていなかったがXcodeでビルドする際に
以下のようなエラーが出ていた。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3694810/0e2ee51a-d425-c0f5-c21b-f14768e53fe9.png" width="600">

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

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

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

# 最終的なコードと実行結果
### 最終的なコード(※pubspec.yamlは変更なし)
```diff_ruby: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(),
        )
      ]),
    );
  }
}
```

### 実行結果
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3694810/3e86f0ce-2482-6336-1a2e-b89a84889757.png" width="400">

# 参　照
https://pub.dev/packages/google_fonts