Why doesn't ThemeData's fontFamily apply to all text like AppBar, Tab, etc

Question

I finally found out.

I set the fontFamily as follows.

@override
Widget build(BuildContext context) {
  return GetMaterialApp(
    theme: ThemeData(
      fontFamily: 'YourAwesomeFontFamily',
    ),
    ...,
  );
}

And I wanted to change the textStyle of the AppBar as well, so I set it as follows.

child: Scaffold(
  appBar: AppBar(
    title: const Text(
      'Awesome Title'
      style: TextStyle(
        color: Colors.red,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
  ...,
),

wow

AppBar's fontFamily had to be set separately.

style: TextStyle(
  fontFamily: 'YourAwesomeFontFamily', // <- this must go in
  ...,
),

Why is this?

Looking for it, is the TabBar like that too? I set the labelStyle because I wanted to make the Tab's font fancy, but the fontFamily was missing.

child: TabBar(
  labelStyles: TextStyle(
    fontFamily: 'YourAwesomeFontFamily', // <- this must go in
    color: Colors.red,
  ),
  ...,
),

But what? Just Text widget comes out with the fontFamily set in ThemeData even if there is no fontFamily.

Text(
  'Applied fontFamily',
  style(
    // here is no fontFamily
    color: Colors.red,
  ),
),

So it was only now that I found out.

I am very confused right now.

I'd appreciate it if you could give me a hint as to why this is.

Amirali Eric Janani · Answer 1 · 2023-04-21T11:08:00.460

2

Here is the hint you need:

return GetMaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      // Setting fontFamily for the bodyText1 text style, that is used by default for the Text widget.
      bodyText1: TextStyle(
        fontFamily: 'YourAwesomeFontFamily',
      ),

      // Setting fontFamily for the bodyText1 text style, that is used by default for the AppBar title and also for TabBar label if you use DefaultTabController.
      headline6: TextStyle(
        fontFamily: 'YourAwesomeFontFamily',
      ),

      //Setting fontFamily for the bodyText1 text style, that is used by default for the TabBar label.
      subtitle1: TextStyle(
        fontFamily: 'YourAwesomeFontFamily',
      ),
    ),
    appBarTheme: AppBarTheme(
      // Setting fontFamily for the AppBar title text style.
      textTheme: TextTheme(
        headline6: TextStyle(
          fontFamily: 'YourAwesomeFontFamily',
        ),
      ),
    ),
    tabBarTheme: TabBarTheme(
      // Setting fontFamily for the TabBar label text style.
      labelStyle: TextStyle(
        fontFamily: 'YourAwesomeFontFamily',
      ),
    ),
  ),
  ...
);

happy coding...

edited Apr 21 '23 at 11:08

answered Apr 21 '23 at 10:23

Amirali Eric Janani

1,477
3
10
20

Text Widget's fontFamily is applied without bodyText1's TextStyle. AppBar, TabBar TextStyle is not applied despite of setting headline6, subtitle1. Thanks for your answer. – debug_ing Apr 21 '23 at 10:58
please check the updated one and let me know if your problem solved – Amirali Eric Janani Apr 21 '23 at 11:08
Yes, it changed fontFamily of AppBar, TabBar, but it couldn't changed the fontFamily of AppBar and TabBar which have custom textStyle without fontFamily – debug_ing Apr 21 '23 at 11:35
The problem is not that I cant' change fontFamily of appbar and tabbar, but the problem is that why I have to apply fontFamily again. When I was already set fontFamily of ThemeData. – debug_ing Apr 21 '23 at 11:37
this is because if you speciffy a TextStyle for a widget, and any TextStyle properties that are not speciffied will default to the values in the ThemeData, but any TextStyle properties that are specified will override the values in the ThemeData.anything else??? – Amirali Eric Janani Apr 21 '23 at 11:50
My question is that why AppBar and TabBar's fontFamily are removed when custom textStyle (which has not fontFamily) is applied. But Text widget's fontFamily is not removed when custom textStyle (which has not fontFamily) is applied. – debug_ing Apr 21 '23 at 12:50
I used the word 'removed' as when ThemeData's fontFamily is not applied. – debug_ing Apr 21 '23 at 12:51

score 0 · Answer 2 · answered Apr 21 '23 at 13:07

I found the reason.

Text widget's TextStyle has inherit property.

If inherit is false, it'll override TextStyle, but default value is true.

text.dart

/// If non-null, the style to use for this text.
///
/// If the style's "inherit" property is true, the style will be merged with
/// the closest enclosing [DefaultTextStyle]. Otherwise, the style will
/// replace the closest enclosing [DefaultTextStyle].
final TextStyle? style;

But AppBar's theme is applied differently, which always override.

app_bar_theme.dart

/// Overrides the default value of [AppBar.titleTextStyle]
/// property in all descendant [AppBar] widgets.
///
/// If this property is specified, then [backwardsCompatibility]
/// should be false (the default).
///
/// See also:
///
///  * [toolbarTextStyle], which overrides the default of [AppBar.toolbarTextStyle]
///    in all descendant [AppBar] widgets.
final TextStyle? titleTextStyle;

Why doesn't ThemeData's fontFamily apply to all text like AppBar, Tab, etc

2 Answers2