[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属性で、フォントサイズを設定してやる必要があります。

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

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

イチオシ

40代から感じるモヤモヤを解消できる 無料動画セミナー

あすコロ式・40代からの人生アップデート【新】戦略

アラフォーでキャリアを失ったバリバリ左脳人間・スピリチュアル耐性ゼロの元金融マンが、人生どん底から立ち上がる過程でたどり着いた「人生再構築メソッド」。40代・50代を過ぎて多くの人が感じる「このままでいいんかな?」「この先どうしたらいいかわからない」というモヤモヤを解消し、人生後半戦をアップデートさせる【新】戦略。

今すぐ無料で動画セミナー(80分)を見る ▶

TOP