[Flutter]AppBarThemeを使ってAppBarをカスタマイズする場合はフォントの再設定（AppBarTheme.titleTextStyle）が必要な場合あり

Flutterのプロジェクトは、デフォルトでは以下のような外観（テーマ）になっていますが、

 

MaterialApp.themeプロパティ内でThemeDataクラスを使ってアプリ全体の外観をカスタマイズすることができます（以下の例ではダークテーマに変更）。

Defines the configuration of the overall visual Theme for a MaterialApp or a widget subtree within the app.

ThemeData class - material library - Dart API

API docs for the ThemeData class from the material library, for the Dart programming language.

 

また、画面上部のアプリバー（AppBar）も、ThemeData.appBarTheme属性を設定することで、アプリ全体に統一的なアプリバーのカスタマイズができます。

 

アプリ起動中にテーマの切り替えを行わない場合は問題ないのですが、以下のような仕組みを使ってアプリ起動中にテーマの切り替えを行い、

かつアプリバーのカスタマイズも行っている場合、テーマの切り替えを行った際にアプリバー（AppBar）のフォントが小さくなってしまう場合があります。

 

これはFlutter公式のissueにも上がっていてSDKでの手当てがまだ無いようなのですが、アプリバー（AppBar）のデフォルトのフォントが「TextTheme.headline6」となっていて、

If this property is null, then AppBarTheme.titleTextStyle of ThemeData.appBarTheme is used. If that is also null, the default value is a copy of the overall theme’s TextTheme.headline6 TextStyle, with color set to the app bar’s foregroundColor.

titleTextStyle property - AppBar class - material library - Dart API

API docs for the titleTextStyle property from the AppBar class, for the Dart programming language.

 

「TextTheme.headline6」のフォントサイズは「20（ロジカルピクセル）」のようなので、

AppBarのフォントを変えたくない場合は、以下のような感じで、AppBarTheme.titleTextStyle属性で、フォントサイズを設定してやる必要があります。

（詳しくは、以下の動画で解説していますので、よろしければご覧下さい）