Question 74736 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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;

  2. 0

    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…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search