[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.

 

また、画面上部のアプリバー(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.

 

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

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

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

こんな記事も読まれています

おすすめコンテンツ






Flutter(フラッター)


みんプロ作成アプリ




TOP