【Flutter】pubspec.yamlでfontが適用されない【エラーが出ない】

本記事では、筆者が過去にハマった話についてお伝えします。

pubspec.yamlって何？

pubspecs.yamlには以下のような情報を記載します。そのため、頻繁に修正が入るようなファイルではありません。

• ビルド環境
• パッケージの情報
• 外部ライブラリの指定
• asset情報　など

記述方法

拡張子の通りYAMLファイルとなるため、インデントに注意が必要です。階層構造で記載する場合はかならず半角スペース２つでインデントを揃える必要があります。

ハマった内容

font関連の情報を指定する際、過去の自分のメモから内容をコピペしました。その後、プログラム上でフォントを指定しましたが、なぜか適用されていませんでした。原因を突き止めたところ、以下のようにpubspec.yamlの中でインデントが抜けてしまっていました。

flutter:
fonts: # ここの先頭に半角スペース２つが必須なのに抜けている
  - family: Raleway
    fonts:
      - asset: fonts/Raleway-Regular.ttf

結果として、fontが一切適用されず、デフォルトのフォントでテキストが表示されてしまっていました。

初心者が陥りがちなミスではありますが、このミスの怖いところはエラーが出てくれないところです。Flutterは賢いので、指定したフォントがなくてもデフォルトのテーマから推測してくれますし、ビルド時にエラーも出ません。

fontの行のインデントを修正し、AndroidStudioのオートフォーマットを適用すると、font以下のインデントはすべて自動で直してくれます。

まとめ

初心者の方は、「プログラムは書いたのに期待通り動作しない、つまりプログラムを書き間違えている」と思いこみがちですが、別の設定ファイルや定義ファイルなどに間違いがあって、１行直せば解決した、みたいなケースはよくあります。うまくいかない時は基本的なところから見直してみてはいかがでしょうか。

• pubspec.yamlを記載するときはインデントに注意しましょう
• IDEのオートフォーマットを適用しましょう