Flutter-Cupertino系のGoldenテスト

CupertinoPickerを使ったWidgetをGolden_testでテストしようとしたらテキスト文字が正しく描画されていなかったのでその対応方法について記載。

初めに

今回、数値を選択するというダイアログを作成するにあたり、CupertinoPickerを使うことにした。
クラス自体は問題なくできたので、表示のテストを行おうと思い、Golden_testを使用したところテキストの中身が正しく表示されていなかった。

上は、単純なTextで下がCupertinoPicker部分。

テキスト背景と前景が同一色で表示されていないのかと色を変更してみたのだけど文字の表示はされなかった。

Golden_test側の確認

Issueとかいろいろ見てみたのだけど、この件についての直接的な情報がなかった。

唯一書かれていたのが以下の内容。

Note, if you need Cupertino fonts, you will need to find a copy of .SF UI Display Text.ttf, and .SF UI Text.ttf to include in your package’s yaml. These are not included in this package by default for licensing reasons.

注意：Cupertino フォントが必要な場合、パッケージの yaml に含めるために .SF UI Display Text.ttf と .SF UI Text.ttf のコピーを見つける必要があります。これらはライセンス上の理由から、このパッケージにはデフォルトで含まれていません。

英語の方がGolden_testのページに書かれていた内容で、下がその日本語訳。

上はフォントのことだけについて書かれているのだけど、CupertinoウィジェットはCupertinoフォントが使われているということなのだろうか。

ということでフォントにあたりを付けて対応してみた。

対策

基本はFlutter-Widget Test時の日本語表示と同じ。

ただ適用する場所がCupertino用のテキストスタイルにする必要があり、ThemeData直下のfontFamilyに指定してもダメだったところ。

theme: ThemeData(
    cupertinoOverrideTheme: const CupertinoThemeData(
        pickerTextStyle:TextStyle(fontFamily: "IPAGothic", color: Colors.black),
    ))),

上の記述はCupertinoPicker用。

Cupertinoの部品ごとにテーマが分かれているようだ。