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

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

blank

 

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

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

blank

 

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

blank

 

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

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

blank

 

これは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(ロジカルピクセル)」のようなので、

blank

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

blank

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

blank

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

今すぐプレゼントを受け取る(約6時間のFlutter初級編体験版動画講座を無料でプレゼント)
blank

はじめての方へ

blank
みんプロ式プログラミング講座体系・ラインナップ
みんプロ式プログラミング講座受講の流れ(割引特典利用方法)
サイトマップ(みんプロHPコンテンツ一覧)
運営会社概要

おすすめコンテンツ

プログラミングを学ぶとどんないいことがあるのか
みんプロ式を選んでいただける6つの理由
ぼくの人生挫折ヒストリー(代表者プロフィール)
ぼくのプログラミング挫折ヒストリー(無料メール講座・6大特典付き)
今最も注目のアプリ開発ツール「Flutter(フラッター)」ミニ動画講座

みんプロ作成アプリ

blank
blank
blank
blank
blank

みんプロ式動画講座(コア・Flutter)

ゼロからのFlutter(初級編)-はじめてのプログラミングからアプリリリースまで-
Flutter中級編1-Web通信・設計・状態管理・DIの基礎-
Flutter中級編2-Firebase/地図・カメラ連携等の基礎-
Flutter中級編3-広告/アプリ内課金等の基礎-
Flutter中級編4-Webアプリとレスポンシブデザインの基礎-

みんプロ式動画講座(サテライト)

Flutter/Dartトラブルシューティング・小ネタ集(コア初級編受講で無料プレゼント)
ゼロからのGit・GitHub(コマンドラインツールを極力使わないバージョン管理入門)
Flutter/Dartにおける設計・状態管理・DIの解説集
Dart逆引き大辞典
Flutterにおけるテストの基礎
blank
blank

TOP