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

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

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

人気No.1

前向きな気持ちになれる 占星術・タロットリーディング

あすコロ式・相談サロン 【ナビるやん】

人に言えない悩みから使命・運勢診断まで、あなたに寄り添いながら“ナビゲート”する、あすコロ人気No.1のオンライン相談サロン。占星術・心理学・タロットの叡智を活かし、普段認識していない「潜在意識」にアクセスしてあなたの気づいていない可能性を拓かせ、明日から前向きに歩めるようになる60分のリーディングセッション。

今すぐ詳細を見る(メルマガ登録で初回半額) ▶

TOP